Wie erhalte ich mit jQuery den Wert eines <span>?

148

Das ist grundlegend.

Wie erhalte ich den Wert "Dies ist mein Name" der oben genannten Spanne?

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

Antworten:

299

Ich denke, das sollte ein einfaches Beispiel sein:

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

oder

$('#item1 span').html();
Lewis
quelle
1
Wo finde ich diese jQuery-Funktionen?
Felipe Barreiros
24
Ich denke, wenn wir diese beiden Funktionen zeigen, ist es wichtig, dass wir neue Codierer nicht verwirren, indem wir vorschlagen, dass sie dasselbe tun, wenn sie es nicht tun (obwohl dies in diesem Beispiel so erscheint). Es ist wichtig zu beachten, dass .text()HTML alle gefundenen Zeichen codiert, während .html()keine Zeichen codiert werden.
VoidKing
Kann dies mit mehreren Bereichen mit derselben Klasse erreicht werden?
Matthew Woodard
Ich bin über diesen Versuch gestolpert, tspan für die Arbeit mit IE herauszufinden. Ich habe festgestellt, dass Sie .text () mit tspan und nicht .html () verwenden müssen. Unsicher warum und es ist möglicherweise nicht bei allen der Fall, aber es wurde im IE behoben, als ich .text () verwendete.
Kalel Wade
@ MatthewWoodard $('.class').each(function() { $(this).html() });; weil $('.class').html()wird den .html () Wert für das erste Element zurückgeben
tomsihap
13
$("#item1 span").text();
rahul
quelle
7

Angenommen, Sie wollten id = "item1" lesen, brauchen Sie

$('#item1 span').text()
Reich
quelle
5

$('#item1').text(); or $('#item1').html(); funktioniert gut für id="item1"

dipraj.shahane
quelle
5

Da Sie kein Attribut für den Wert 'item' angegeben haben, gehe ich davon aus, dass eine Klasse verwendet wird:

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

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

Stellen Sie sicher, dass Sie auf das Laden des DOM warten, um Ihren Code zu verwenden. In jQuery verwenden Sie die folgende ready()Funktion:

<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
quelle
1
Du hast die Frage geändert! Ihre Antwort ist richtig für Ihre Frage, er gab die ID nicht als Klassennamen an
Lewis
Nun, wenn Sie den ersten Kommentar unter seinem Namen sehen, werden Sie feststellen, dass er überhaupt kein Attribut geschrieben hat. Es war <div 'item1'>, ich habe anscheinend falsch geraten.
Francisco Aquino
2

Würden Sie in Javascript nicht verwenden document.getElementById('item1').innertext?

Mürrisch
quelle
1
     $('span id').text(); worked with me
Dev.H.
quelle
1

$('#id span').text() ist die Antwort!

Nacho
quelle
0

$('#item1 span').html(); Es funktioniert mit meinem Code

Mohammed Javed
quelle
0

SEHR WICHTIG Zusätzliche Informationen zum Unterschied zwischen .text () und .html ():

Wenn Ihr Selektor mehr als ein Element auswählt, z. B. haben Sie zwei Bereiche wie folgt <span class="foo">bar1</span> <span class="foo">bar2</span> :

dann

$('.foo').text();fügt die beiden Texte hinzu und gibt Ihnen das; wohingegen

$('.foo').html(); gibt Ihnen nur eine davon.

user3788051
quelle
0

Sie können id in span direkt in Ihrem HTML verwenden.

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

Dann wäre Ihr jQuery-Code

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

Jemand hat mir geholfen, Fehler zu überprüfen und festgestellt, dass er val () anstelle von text () verwendet hat. Es ist nicht möglich, die Funktion val () in span zu verwenden. So

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

wird null zurückgeben.

Cristian
quelle
-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
quelle