如何使用 jquery 在新标签中包装与强标签同级的字符串？

Question

在如下例所示的 html 中，我需要将 text I need to select 部分包装在带有自定义 class 的 span 标签中，但我如何 select只是那部分不包括上面 strong 标签中的内容，使用 jquery？

<span>
  <strong> random gibberish </strong>
  text I need to select
</span>

编辑：简单地在父级上使用 .text() 是行不通的，因为这会将整个内部 html 转换为文本，包括 strong

中的部分

Answer 1

您可以使用 nextSibling.nodeValue 来获取紧跟在强标签之后的文本。然后你可以在文本内容上做一个 replace() 来将标签包裹在它周围 - 我正在使用带有 newClass 和相关样式的跨度来做到这一点。

var strongEl = document.querySelector('strong');
var siblingEl = strongEl.nextSibling.nodeValue;
var spanContent = $('span').html();
var newSpanContent = '<span class="newClass">'+siblingEl +'</span>';
$('span').html(spanContent.replace(siblingEl, newSpanContent));

console.log(siblingEl);

span.newClass {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <strong> random gibberish </strong>
  text I need to select
</span>

Answer 2

您可以使用 contents 和 eq 函数：

$('span').each(function() {
  $(this).contents().eq(2).wrap('<span class="someClass"/>')
});

.someClass {
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <strong> random gibberish </strong>
  text I need to select
</span>

Answer 3

您可以使用 .after( function ) 来完成这项工作。因此在函数回调中使用 nextSibling 属性获取 strong 的下一个文本并将其包装在 span

中

$("span > strong").after(function(){
  return "<span class='new'>"+$(this.nextSibling).remove().text()+"</div>";  
});

.new {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <strong> random gibberish </strong>
  text I need to select
</span>

如何使用 jquery 在新标签中包装与强标签同级的字符串？

How to wrap string which is sibling to strong tag in new tag using jquery?

html

javascript

jquery

nextsibling