我需要关闭< span>在单词“hello”之前标记,并在单击按钮后重新打开它.
这是一个Fiddle
这是我的代码：
<span class="border">
border Hello border border
</span>
<div>
<span class="button">Style me !</span>
</div>
jQuery：
$('.button').click(function () {
$('.border').each(function () {
var t = $(this).text();
var s = t.split('Hello').join('</span>Hello<span class="border">');
$(this).html(s)
});
});
<span class="border">
border Hello<span class="border"> border border
</span>
我想要的输出是：
<span class="border">
border </span>Hello<span class="border"> border border
</span>
解决方法
您可以像字符串一样修改dom结构,但是您必须定位父元素,因为您无法插入部分元素
$('.button').click(function () {
$('.border').each(function () {
var t = $(this).parent().html();
var s = t.split('Hello').join('</span>Hello<span class="border">');
$(this).parent().html(s)
});
});
请注意,这适用于示例,但如果父级也有其他元素,它可能会导致问题,我强烈建议找到另一种方法来获得您正在寻找的结果,而不是关闭和打开中间的元素等.
编辑：
这是另一种方法,它不会影响父母,而且更加整洁.
它使用outerHTML来获取周围的标记,这样就不会插入部分元素,但是开始和结束标记都是传递的字符串的一部分
$('.button').click(function () {
$('.border').each(function () {
this.outerHTML = this.outerHTML.split('Hello').join('</span>Hello<span class="border">');
});
});
或者更整洁的jQuery版本
$('.button').click(function () {
$('.border').prop('outerHTML',function(_,html) {
return html.split('Hello').join('</span>Hello<span class="border">');
});
});
