Dapatkan elemen dengan indeks di jQuery

117

Saya memiliki daftar yang tidak berurutan dan indeks file li tag dalam daftar itu. Saya harus mendapatkan lielemen dengan menggunakan indeks itu dan mengubah warna latar belakangnya. Apakah ini mungkin tanpa mengulang seluruh daftar? Maksud saya, apakah ada metode yang dapat mencapai fungsi ini?

Ini kode saya, yang saya yakin akan berhasil ...

<script type="text/javascript">
  var index = 3;
</script>

<ul>
    <li>India</li>
    <li>Indonesia</li>
    <li>China</li>
    <li>United States</li>
    <li>United Kingdom</li>
</ul>

<script type="text/javascript">
  // I want to change bgColor of selected li element
  $('ul li')[index].css({'background-color':'#343434'});

  // Or, I have seen a function in jQuery doc, which gives nothing to me
  $('ul li').get(index).css({'background-color':'#343434'});
</script>
Rama Rao M
sumber
3
Dua cara Anda menggunakan di sana mengembalikan elemen dom daripada objek jQuery sehingga panggilan ke .css tidak akan berfungsi padanya. Jawaban Darius di bawah menggunakan eq adalah yang Anda inginkan.
Richard Dalton

Jawaban:

257
$(...)[index]      // gives you the DOM element at index
$(...).get(index)  // gives you the DOM element at index
$(...).eq(index)   // gives you the jQuery object of element at index

Objek DOM tidak memiliki cssfungsi, gunakan yang terakhir ...

$('ul li').eq(index).css({'background-color':'#343434'});

dokumen:

.get(index) Pengembalian: Elemen

.eq(index) Pengembalian: jQuery

gdoron mendukung Monica
sumber
19

Anda dapat menggunakan .eq()metode jQuery untuk mendapatkan elemen dengan indeks tertentu.

$('ul li').eq(index).css({'background-color':'#343434'});
Christofer Eliasson
sumber
12

Anda dapat menggunakan metode eq atau pemilih :

$('ul').find('li').eq(index).css({'background-color':'#343434'});
Darius
sumber
1
Anda dapat membuat pemilih lebih sederhana dengan $('ul li').eq(index).css({'background-color':'#343434'});
gdoron mendukung Monica
1
Tetapi di sebagian besar browser, selektor $('ul').find('li')lebih cepat. [1 , 2 ]
Darius
1

Ada cara lain untuk mendapatkan elemen dengan indeks di jQuery menggunakan :nth-of-typepseudo-class CSS :

<script>
    // css selector that describes what you need:
    // ul li:nth-of-type(3)
    var selector = 'ul li:nth-of-type(' + index + ')';
    $(selector).css({'background-color':'#343434'});
</script>

Ada selektor lain yang dapat Anda gunakan dengan jQuery untuk mencocokkan elemen apa pun yang Anda butuhkan.

Yury Fedorov
sumber
-1

Anda bisa melewati jquery dan hanya menggunakan penandaan gaya CSS:

 <ul>
 <li>India</li>
 <li>Indonesia</li>
 <li style="background-color:#343434;">China</li>
 <li>United States</li>
 <li>United Kingdom</li>
 </ul>
Adam H.
sumber