Comment obtenir la valeur d'un <span> en utilisant jQuery?


149

Ceci est basique.

Comment obtenir la valeur "Ceci est mon nom" de la plage ci-dessus?

<div id='item1'>
<span>This is my name</span>
</div>

Réponses:


299

Je pense que cela devrait être un exemple simple:

$('#item1 span').text();

ou

$('#item1 span').html();

1
Où puis-je trouver ces fonctions jQuery?
Felipe Barreiros

25
Je pense qu'il est important, lorsque nous montrons ces deux fonctions, de ne pas confondre les nouveaux codeurs en leur suggérant de faire la même chose, alors qu'ils ne le font pas (bien que dans cet exemple, cela semble le cas). Il est important de noter que .text()html encodera tous les caractères qu'il trouve, alors .html()qu'il n'encodera aucun caractère.
VoidKing

Cela peut-il être accompli avec plusieurs travées avec la même classe?
Matthew Woodard

Je suis tombé sur ceci en essayant de comprendre tspan pour travailler avec IE. J'ai trouvé que vous devez utiliser .text () avec tspan et non .html (). Je ne sais pas pourquoi et ce n'est peut-être pas le cas pour tout le monde, mais cela l'a corrigé dans IE lorsque j'ai utilisé .text ().
Kalel Wade

@MatthewWoodard $('.class').each(function() { $(this).html() });; car $('.class').html()retournera la valeur .html () pour le premier élément
tomsihap


7

En supposant que vous vouliez lire id = "item1", vous devez

$('#item1 span').text()


5

Étant donné que vous n'avez pas fourni d'attribut pour la valeur `` élément '', je suppose qu'une classe est utilisée:

<div class='item1'>
  <span>This is my name</span>
</div>

alert($(".item span").text());

Assurez-vous d'attendre que le DOM se charge pour utiliser votre code, dans jQuery vous utilisez la ready()fonction pour cela:

<html>
 <head>
  <title>jQuery test</title>
  <!-- script that inserts jquery goes here -->
  <script type='text/javascript'>
    $(document).ready(function() { alert($(".item span").text()); });
  </script>
</head>
<body>
 <div class='item1'>
   <span>This is my name</span>
 </div>
</body>


1
vous avez changé la question! Votre réponse est juste pour votre question, il précisait l'identifiant et non un nom de classe
Lewis

eh bien, si vous voyez le premier commentaire sous son nom, vous remarquerez qu'il n'a pas écrit d'attribut du tout, c'était <div 'item1'>, je me suis trompé apparemment.
Francisco Aquino

2

En javascript n'utiliseriez-vous pas document.getElementById('item1').innertext?





0

TRÈS IMPORTANT Informations supplémentaires sur la différence entre .text () et .html ():

Si votre sélecteur sélectionne plus d'un élément, par exemple vous avez deux travées comme ça <span class="foo">bar1</span> <span class="foo">bar2</span> ,

puis

$('.foo').text();ajoute les deux textes et vous donne cela; tandis que

$('.foo').html(); vous en donne un seul.


0

Vous pouvez utiliser id in span directement dans votre html.

<span id="span_id">Client</span>

Alors votre code jQuery serait

$("#span_id").text();

Quelqu'un m'a aidé à vérifier les erreurs et a découvert qu'il utilisait val () au lieu de text (), il n'est pas possible d'utiliser la fonction val () dans span. Alors

$("#span_id").val();

renverra null.


-2
<script>
    $(document).ready(function () {

            $.each($(".classBalence").find("span"), function () {
            if ($(this).text() >1) {
                $(this).css("color", "green")

            }
            if ($(this).text() < 1) {
                $(this).css("color", "red")
                $(this).css("font-weight", "bold")
            }
        });

    });
    </script>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.