如何在元素后获取文本节点？答案

【问题标题】：How to get text node after element?如何在元素后获取文本节点？
【发布时间】：2012-10-12 15:27:47
【问题描述】：

使用 jQuery。我有以下html：

<input type="checkbox" name='something' value='v1' /> All the world <br />

我将如何只获得文本。我应该使用什么选择器？（我需要“全世界”）

我也不能触摸 HTML...

【问题讨论】：

stackoverflow.com/questions/6925088/…

标签： javascript jquery jquery-selectors textnode

【解决方案1】：

尝试使用 DOM 函数 .nextSibling 选择下一个节点（包括文本节点）并使用 nodeValue 获取文本 All the world

$(':checkbox')[0].nextSibling.nodeValue

【讨论】：

【解决方案2】：

只需使用纯 JavaScript nextSibling，尽管您必须“退出”jQuery 才能使用该方法（因此使用了 [0]）：

var text = $('input:checkbox[name="something"]')[0].nextSibling.nodeValue;

JS Fiddle demo.

我终于意识到我的其他建议有什么问题，已修复：

var text = $('input:checkbox[name="something"]').parent().contents().filter(
    function(){
        return this.nodeType === 3 && this.nodeValue.trim() !== '';
    }).first().text();

JS Fiddle demo.

并确保您只从之前获得textNodes br（坦率地说，这变得过于复杂，第一个建议更容易工作，而且，我怀疑可靠）：

var text = $('input:checkbox[name="something"]').parent().contents().filter(
    function(){
        return this.nodeType === 3 && this.nodeValue.trim() !== '' && $(this).prevAll('br').length === 0;
    }).text();

JS Fiddle demo.

【讨论】：

如果你打算使用filter你可以很好地在文本节点上使用.text()..不需要[0].nodeValue..只是jQuery没有选择文本的方法节点。
这不会产生文本。
尽管 OP 要求节点，但似乎确实需要文本。只需在末尾添加.data 或.nodeValue。
@KevinBoucher：在 Chromium 18/Ubuntu 11.04 中确实似乎。你在测试什么？不，你是对的。编辑更正！
@KevinBoucher nextSibling是获取节点..获取需要做的文字nodeValue

【解决方案3】：

如果您在标记中添加了label（推荐），您可以这样做：

HTML

<input type="checkbox" id="something" name="something" value="v1" /><label for="something">All the world</label> <br />

var text = $( '#something ~ label:first' ).text();

【讨论】：

+1 假设这是标签 （很可能），但我会改用有效的 Selectors API 选择器，以便可以使用 querySelectorAll。 $('#something + label')
下一个兄弟选择器有什么问题？ api.jquery.com/next-siblings-selector
什么都没有，但:first 是专有的 Sizzle 选择器，因此它默认为 Sizzle 基于 JavaScript 的选择器引擎，而不是浏览器的原生引擎。
@KevinBoucher 对，但关键是它不是 CSS 选择器，因此无法使用 querySelectorAll，这意味着必须解析字符串。
无法使用标签，我无法触摸 HTML

【解决方案4】：

只是在一个老问题的例子中折腾，将文本包装在标签中

$('input[type="checkbox"]')
  .each(function(index, el) {
    var textNode = $(el.nextSibling);
    if (textNode[0].nodeType == Node.TEXT_NODE) {
      let checkwrap = $(el).wrap('<label class="found"></label>').closest('.found');
      textNode.appendTo(checkwrap);
    }
  });

.found {
  border: solid cyan 1px;
  color: blue;
  padding: 0.5em;
  display: inline-block;
  margin: 0.3em;
}

label.found {
  color: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<span>in a span</span>
<input type="checkbox" name='something' value='v1' /> All the world <br />
<input type="checkbox" name='something2' value='v2' /> All the world 2 <span>in a span</span><br />
<input type="checkbox" name='something3' value='v3' /> All the world 3 <span>in a span</span>
<input type="checkbox" name='something4' value='v4' /> All the world 4<span>in a span also</span>

那里，包裹在标签中，哦，等等，这是一个答案，只需要按类型隔离nextSibling

【讨论】：