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

Question

我有以下 html

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

我想替换“外部”值，使跨度及其“内部”文本保持不变。使用

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

替换标签的全部内容(以及跨度)。有没有一种巧妙的方法可以只选择文本 block “外部”，而不添加额外的跨度或执行高级操作，例如存储标签内部跨度的值然后重新应用它？

Answer 1

这将仅更新第一个 Text node 的文本在元素中，而不干扰 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;
  }
});

Live example | source

当然，您可以对其进行改进。 Text 节点的当前文本(当然)可以从 node.nodeValue 获得，因此如果您只想修改它(也许只替换它的某些部分)，您可以去做;或者如果您想修改与给定模式匹配的第一个，等等。