Jak uzyskać wartość <span> przy użyciu jQuery?

149

To jest podstawowe.

Jak uzyskać wartość „To jest moje imię” z powyższego zakresu?

<div id='item1'>
<span>This is my name</span>
</div>
javascript jquery html Felipe Barreiros
źródło

Odpowiedzi:

299

Myślę, że powinien to być prosty przykład:

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

lub 

$('#item1 span').html();
Chwytak
źródło
1
Gdzie znajdę te funkcje jQuery?
Felipe Barreiros
25
Myślę, że przy przedstawianiu tych dwóch funkcji ważne jest, aby nie mylić nowych programistów, sugerując, że robią to samo, kiedy nie (chociaż w tym przykładzie tak będzie). Należy pamiętać, że .text()html zakoduje wszystkie znalezione znaki, a .html()nie zakoduje żadnych znaków.
VoidKing
Czy można to osiągnąć za pomocą wielu rozpiętości tej samej klasy?
Matthew Woodard
Natknąłem się na to, próbując wymyślić tspan do pracy z IE. Odkryłem, że musisz używać .text () z tspan, a nie .html (). Nie jestem pewien, dlaczego i może nie być w przypadku wszystkich, ale naprawiłem to w IE, gdy użyłem .text ().
Kalel Wade
@MatthewWoodard $('.class').each(function() { $(this).html() });; ponieważ $('.class').html()zwróci wartość .html () dla pierwszego elementu
tomsihap
13 
$("#item1 span").text();
rahul
źródło
7

Zakładając, że zamierzałeś odczytać id = "item1", potrzebujesz

$('#item1 span').text()
Bogaty
źródło
5

$('#item1').text(); or $('#item1').html(); działa dobrze dla id="item1"

dipraj.shahane
źródło
5

Ponieważ nie podałeś atrybutu dla wartości „item”, zakładam, że używana jest klasa:

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

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

Upewnij się, że zaczekasz na załadowanie DOM, aby użyć twojego kodu, w jQuery używasz do tego ready()funkcji:

<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
źródło
1
zmieniłeś pytanie! Twoja odpowiedź jest właściwa dla twojego pytania, podał identyfikator, a nie nazwę klasy
Lewis
cóż, jeśli zobaczysz pierwszy komentarz pod jego nazwiskiem, zauważysz, że w ogóle nie napisał atrybutu, był to <div 'item1'>, najwyraźniej źle zgadłem.
Francisco Aquino
2

W javascript nie użyłbyś document.getElementById('item1').innertext?

Gderliwy
źródło
1 
     $('span id').text(); worked with me
Dev.H
źródło
1

$('#id span').text() jest odpowiedzią!

Nacho
źródło
0

$('#item1 span').html(); Działa z moim kodem

Mohammed Javed
źródło
0

BARDZO WAŻNE Dodatkowe informacje o różnicy między .text () i .html ():

Jeśli twój selektor wybiera więcej niż jeden element, np. Masz dwa takie zakresy <span class="foo">bar1</span> <span class="foo">bar2</span> ,

następnie

$('.foo').text();dołącza oba teksty i daje ci to; natomiast

$('.foo').html(); daje tylko jedną z nich.

user3788051
źródło
0

Możesz użyć id in span bezpośrednio w swoim html.

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

Wtedy twój kod jQuery byłby

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

Ktoś pomógł mi sprawdzić błędy i stwierdził, że użył val () zamiast text (), nie jest możliwe użycie funkcji val () w span. Więc

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

zwróci wartość null.

Cristian
źródło
-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
źródło