Question

我有一些形式为

的html

<span class="prefix">something</span> (Optional)
Text
<span class="badge">Something else</span> (optional, can be multiple)
<span class="postfix">Another thing</span>

我想在另一个span中包装Text而不是span s，以便我可以根据需要使用jQuery提取和替换它。我无法编辑生成此HTML的后端代码。鉴于我事先并不知道第一个跨度是否存在，或者最后会有多少跨度，有没有办法包装纯文本以便可以对其进行操作？

我希望得到一个看起来像这样的输出：

<span class="prefix">something</span>
<span class="txt">Text</span>
<span class="badge">something else</span>...
<span class="postfix">another thing</span>

Answer 1

试试这个：

$('#container').contents()
               .filter(function() { return this.nodeType === 3 })
               .wrap('<span class="txt" />');

基于这个答案：https://stackoverflow.com/a/5291776/616535

Answer 2

filter()容器元素的contents()与纯文本节点的<{1}}
wrap()他们在一个范围内

$('#container').contents().filter(function() {
  return $(this)[0].nodeValue && $(this)[0].nodeValue.trim();
}).wrap('<span class="txt"/>');

.txt{
  color:green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
  <span class="prefix">something</span>
  Text
  <span class="badge">Something else</span> 
  <span class="postfix">Another thing</span>
</div>

Answer 3

是的，请将您的范围设为id，例如id =＆＃34; textX＆＃34;。然后，您可以使用js或jquery $（＆＃34; #textX＆＃34;）对其进行操作。

仅包含节点的文本

3 个答案: