选择第一级文本元素'.text()'而不选择子元素

Question

我有以下HTML

<label>
outer
<span>inner</span>
</label>

我想替换'外部'值,使span的内部文本保持不变.运用

$('label').text('new outer');

替换标签的全部内容(以及跨度).有没有一种漂亮的方法只选择文本块'outer'而不添加额外的跨度或执行高级的东西,比如存储标签内部跨度的值,然后重新应用它？

Answer 1

这将仅更新元素中第一个Text节点的文本,而不会干扰span(或任何后续Text节点):

$("label").contents().each(function() {
  // Within this iterator function, jQuery sets `this` to be
  // each child node (including Text nodes, not just Elements)
  if (this.nodeType === 3) { // 3 = text node
      this.nodeValue = "updated ";
      return false;
  }
});

实例 | 资源

当然,你可以改进它.该Text节点的当前文本是可用的(当然)node.nodeValue,所以如果你想只修改(也许只更换其中的某些部分),你可以做到这一点; 或者如果你想修改匹配给定模式的第一个,等等.