如何在元素后获取文本节点?

IT技术 javascript jquery jquery-selectors textnode
2021-02-21 03:15:07

使用 jQuery。我有以下 html:

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

我怎么会只得到文本。我应该使用什么选择器?(我需要“全世界”)

我也无法触摸 HTML...

4个回答

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

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

只需使用纯 JavaScript nextSibling,尽管您必须“退出”jQuery 才能使用该方法(因此是[0]):

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

JS小提琴演示

我终于意识到我的另一个建议有什么问题,该建议已修复:

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

JS小提琴演示

并确保您只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小提琴演示

即使 OP 要求节点,似乎文本实际上是需要的。只需添加.data.nodeValue到最后。
2021-04-24 03:15:07
@KevinBoucher:在 Chromium 18/Ubuntu 11.04 中似乎确实如此你在测试什么?不,你是对的。编辑更正!
2021-04-28 03:15:07
如果您打算使用,filter您可以很好地.text()在文本节点上使用.. 不需要[0].nodeValue.. 只是 jQuery 没有选择文本节点的方法。
2021-05-05 03:15:07
@KevinBouchernextSibling是获取节点.. 获取你需要做的文本nodeValue
2021-05-08 03:15:07
这不会产生文本。
2021-05-14 03:15:07

如果您label在标记中添加了 a (推荐),您可以这样做:

HTML

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

JS

var text = $( '#something ~ label:first' ).text();
下一个兄弟姐妹选择器有什么问题?api.jquery.com/next-siblings-selector
2021-04-21 03:15:07
无法使用标签,我无法触摸 HTML
2021-04-21 03:15:07
@KevinBoucher 是的,但关键是它不是 CSS 选择器,因此不能使用 querySelectorAll,这意味着必须解析字符串。
2021-04-29 03:15:07
什么都没有,但这:first是一个专有的 Sizzle 选择器,所以它默认为 Sizzle 基于 JavaScript 的选择器引擎,而不是浏览器的本机引擎。
2021-05-01 03:15:07
+1 假设这是标签(很可能),但我会使用有效的 Selectors API 选择器,以便querySelectorAll可以使用。$('#something + label')
2021-05-05 03:15:07

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

$('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要按类型隔离即可