Bagaimana cara saya mendapatkan nilai <span> menggunakan jQuery?

149

Ini dasar.

Bagaimana cara saya mendapatkan nilai 'Ini nama saya' pada rentang di atas?

<div id='item1'>
<span>This is my name</span>
</div>
javascript jquery html Felipe Barreiros
sumber

Jawaban:

299

Saya pikir ini harus menjadi contoh sederhana:

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

atau 

$('#item1 span').html();
Lewis
sumber
1
Di mana saya menemukan fungsi-fungsi jQuery?
Felipe Barreiros
25
Saya pikir ini penting ketika menunjukkan dua fungsi ini bahwa kita tidak membingungkan coders baru dengan menyarankan bahwa mereka melakukan hal yang sama, ketika mereka tidak melakukan hal yang sama (walaupun dalam contoh ini akan terlihat demikian). Penting untuk dicatat bahwa .text()html akan menyandikan karakter apa pun yang ditemukannya, sementara .html()tidak akan menyandikan karakter apa pun.
Membatalkan
Bisakah ini dilakukan dengan beberapa rentang dengan kelas yang sama?
Matthew Woodard
Saya sengaja menemukan ini mencoba mencari tspan untuk bekerja dengan IE. Saya telah menemukan bahwa Anda perlu menggunakan .text () dengan tspan dan bukan .html (). Tidak yakin mengapa dan itu mungkin tidak menjadi masalah bagi semua orang tetapi itu diperbaiki di IE ketika saya menggunakan .text ().
Kalel Wade
@MatthewWoodard $('.class').each(function() { $(this).html() });; karena $('.class').html()akan mengembalikan nilai .html () untuk elemen pertama
tomsihap
13 
$("#item1 span").text();
rahul
sumber
7

Dengan asumsi Anda bermaksud membaca id = "item1", Anda perlu

$('#item1 span').text()
Kaya
sumber
5

$('#item1').text(); or $('#item1').html(); berfungsi dengan baik untuk id="item1"

dipraj.shahane
sumber
5

Karena Anda tidak memberikan atribut untuk nilai 'item', saya mengasumsikan kelas sedang digunakan:

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

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

Pastikan Anda menunggu DOM memuat untuk menggunakan kode Anda, di jQuery Anda menggunakan ready()fungsi untuk itu:

<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
sumber
1
Anda telah mengubah pertanyaan! Jawaban Anda tepat untuk pertanyaan Anda, ia menentukan id bukan nama kelas
Lewis
baik, jika Anda melihat komentar pertama dengan namanya Anda akan melihat bahwa dia tidak menulis atribut sama sekali, itu adalah <div 'item1'>, saya menebak salah rupanya.
Francisco Aquino
2

Dalam javascript tidak akan Anda gunakan document.getElementById('item1').innertext?

Pemarah
sumber
1 
     $('span id').text(); worked with me
Dev. H
sumber
1

$('#id span').text() adalah jawabannya!

Nacho
sumber
0

$('#item1 span').html(); Ini bekerja dengan kode saya

Mohammed Javed
sumber
0

SANGAT PENTING Info tambahan tentang perbedaan antara .text () dan .html ():

Jika pemilih Anda memilih lebih dari satu item, misalnya Anda memiliki dua rentang seperti itu <span class="foo">bar1</span> <span class="foo">bar2</span> ,

kemudian

$('.foo').text();menambahkan dua teks dan memberi Anda itu; sedangkan

$('.foo').html(); memberi Anda hanya satu dari mereka.

pengguna3788051
sumber
0

Anda bisa menggunakan id dalam rentang langsung di html Anda.

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

Maka kode jQuery Anda akan menjadi

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

Seseorang membantu saya memeriksa kesalahan dan menemukan bahwa dia menggunakan val () alih-alih teks (), tidak mungkin menggunakan fungsi val () dalam rentang. Begitu

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

akan mengembalikan nol.

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