web-dev-qa-db-ja.com

要素の後にテキストノードを取得するにはどうすればよいですか？

JQueryを使用する。次のhtmlがあります。

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

どうすればテキストのみを取得できますか。どのセレクターを使用すればよいですか？ （「全世界」が必要です）

HTMLにも触れられない...

javascriptjqueryjquery-selectorstextnode
33
Itay Moav -Malimovka

DOM関数.nextSiblingを使用して次のノード（テキストノードを含む）を選択し、nodeValueを使用してテキストAll the worldを取得してみてください

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

単純なJavaScript nextSiblingを使用するだけですが、そのメソッドを使用するにはjQueryを「ドロップアウト」する必要があります（したがって、[0]）：

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

JS Fiddleデモ 。

そして最後に、修正された他の提案の何が問題かを理解しました。

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

JS Fiddleデモ 。

そして、あなたがtextNodesをbeforeの前から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デモ 。

5
David Thomas

マークアップにlabelを追加した場合（推奨）、次のようにすることができます。

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();
3
Kevin Boucher

例で古い質問に投げるだけで、テキストをラベルで囲みます

$('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をタイプごとに分離する必要があります

0
Mark Schultheiss