web-dev-qa-db-fra.com

Comment obtenir le nœud de texte après l'élément?

Utilisation de jQuery. J'ai le html suivant:

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

Comment pourrais-je obtenir SEULEMENT le texte. quel sélecteur dois-je utiliser? (J'ai besoin du "Tout le monde")

Je ne peux pas non plus toucher au HTML ...

javascriptjqueryjquery-selectorstextnode
33
Itay Moav -Malimovka

Essayez d'utiliser la fonction DOM .nextSibling pour choisir le nœud suivant (y compris les nœuds de texte) et utilisez nodeValue pour obtenir le texte All the world

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

Il suffit d'utiliser le plain-JavaScript nextSibling, même si vous devez "abandonner" jQuery pour utiliser cette méthode (d'où le [0]):

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

JS Fiddle .

Et j'ai finalement réalisé ce qui n'allait pas avec mon autre suggestion, qui a été corrigée:

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

JS Fiddle .

Et pour vous assurer que vous obtenez uniquement le textNodes de avant le br (bien que cela devienne franchement trop complexe, et la première suggestion fonctionne beaucoup plus facilement et, je soupçonne de manière fiable):

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

Si vous avez ajouté un label à votre balisage (ce qui est recommandé), vous pouvez le faire de cette façon:

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

Il suffit de jeter un exemple à une question ancienne, d'envelopper le texte dans une étiquette

$('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>

là, enveloppé dans une étiquette, oh attendez, c'est une réponse, il suffit d'avoir le nextSibling isolé par type

0
Mark Schultheiss