Question

我有以下html

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

我想替换'outer'值，使span的'inner'文本保持不变。使用

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

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

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，因此如果您只想修改它（可能只替换它的某些部分），您可以这样做;或者如果你想修改匹配给定模式的第一个，等等。

Answer 2

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

不是。

你可以使用正则表达式替换<span>之前的所有内容，但它会是一个笨重的正则表达式，虽然它适用于某些情况，如果你有任何情况它会破坏其他标记，特别是如果你有另一个元素包裹<span>。

我的建议是简单地在那里放一个跨度。如果你知道你将要操作那段代码，那么在DOM中给它一个元素。这是让它易于理解的最佳方式，它让你远离做愚蠢的事情，比如重建整个结构只是因为你想改变一个单词。

选择第一级文本元素'.text（）'而不选择子元素

2 个答案: