Question

在类似以下示例的html中，我需要使用自定义类将onMove(evt) { this.targetElement = evt.relatedContext.element; this.draggedElement = evt.draggedContext.element; return false; }, startDrag(evt) { this.targetElement = null; this.draggedElement = null; }, endDrag() { console.log("target %o, dragged %o", this.targetElement, this.draggedElement) ; if (this.targetElement == null) { this.top.push(this.draggedElement) ; } else { const ind = this.top.indexOf(this.targetElement) ; this.top.splice(ind, 1, this.draggedElement) } }部分包装在span标签中，但是如何只选择不包含text I need to select标签中内容的那部分上面，使用jQuery？

strong

编辑：仅在父级上使用<span> <strong> random gibberish </strong> text I need to select </span>无效，因为这样会将整个内部html转换为包含.text()中的部分的文本

Answer 1

您可以使用nextSibling.nodeValue在Strong标签之后立即获取文本。然后，您可以在文本内容上执行replace（）来包装标签周围的内容-我正在使用具有newClass和相关样式的span来完成此操作。

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 )来完成这项工作。因此，在函数回调中，使用strong属性获取nextSibling的下一个文本并将其包装在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在新标签中包装与强标签同级的字符串？

3 个答案: