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>
Felipe Barreiros
la source

Réponses:

299

Je pense que cela devrait être un exemple simple:

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

ou

$('#item1 span').html();
Lewis
la source
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
13
$("#item1 span").text();
rahul
la source
7

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

$('#item1 span').text()
Riches
la source
5

$('#item1').text(); or $('#item1').html(); fonctionne bien pour id="item1"

dipraj.shahane
la source
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>

Francisco Aquino
la source
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?

Grincheux
la source
1
     $('span id').text(); worked with me
Dev.H
la source
1

$('#id span').text() Est la réponse!

Nacho
la source
0

$('#item1 span').html(); Il fonctionne avec mon code

Mohammed Javed
la source
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.

user3788051
la source
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.

Cristian
la source
-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>
Mahesh
la source