关闭并重新打开特定单词附近的标签

Question

我需要在单词“hello”前面关闭<span>标签，然后在单击按钮后立即重新打开标签。

这里是一个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) 
    }); 
}); 

点击.button后的HTML输出我是：

<span class="border"> 
    border Hello<span class="border"> border border 
</span> 

而且我想输出是：

<span class="border"> 
    border </span>Hello<span class="border"> border border 
</span> 

为什么不是.join功能插入</span>关闭标签？

Answer 1

您可以修改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) 
    }); 
}); 

FIDDLE

请注意，这适用于该示例，但如果父项也有其他元素，它可能会导致问题，我强烈建议f inding另一种方式来获得你不是在中间等关闭和开启的元素寻找其他的结果

编辑：

这里做的另一种方式，这并不影响父母，而且很整洁。
它使用outerHTML让周围的标签为好，这样没有部分元素插入，但都开始和结束标记是通过

$('.button').click(function() { 
    $('.border').each(function() { 
     this.outerHTML = this.outerHTML.split('Hello').join('</span>Hello<span class="border">'); 
    }); 
}); 

FIDDLE

或字符串的一部分，甚至是整洁的jQuery版本

$('.button').click(function() { 
    $('.border').prop('outerHTML', function(_, html) { 
     return html.split('Hello').join('</span>Hello<span class="border">'); 
    }); 
}); 

FIDDLE

Answer 2

您不能像字符串一样修改dom结构。

$('.button').click(function() { 
    $('.border').replaceWith(function() { 
     var parts = $(this).text().split('Hello'); 
     return '<span class="border">' + parts.join('</span>Hello<span class="border">') + '</span>'; 
    }); 
}); 

演示：Fiddle

Answer 3

你可以用你想要的字符串替换“你好”的字词

$('.button').click(function() { 
     $('.border').each(function() { 
      var t = $(this).text(); 
      var s = t.replace('Hello', '</span>Hello<span class="border">'); 
      $(this).html(s) 
     }); 
    });