รับองค์ประกอบตามดัชนีใน jQuery

ฉันมีรายการที่ไม่เรียงลำดับและดัชนีของliแท็กในรายการนั้น ฉันต้องได้รับliองค์ประกอบโดยใช้ดัชนีนั้นและเปลี่ยนสีพื้นหลัง เป็นไปได้หรือไม่โดยไม่ต้องวนซ้ำรายการทั้งหมด ฉันหมายความว่ามีวิธีใดบ้างที่สามารถใช้งานฟังก์ชันนี้ได้

นี่คือรหัสของฉันซึ่งฉันเชื่อว่าจะใช้ได้ ...

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

$(...)[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

วัตถุ DOM ไม่มีcssฟังก์ชันใช้ ...

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

เอกสาร:

.get(index) ผลตอบแทน: องค์ประกอบ

• คำอธิบาย: ดึงองค์ประกอบ DOM ที่ตรงกับวัตถุ jQuery
• ดู: https://api.jquery.com/get/

.eq(index) ผลตอบแทน: jQuery

• คำอธิบาย: ลดชุดขององค์ประกอบที่ตรงกันเป็นหนึ่งในดัชนีที่ระบุ
• ดู: https://api.jquery.com/eq/

คุณสามารถใช้.eq()วิธีของ jQuery เพื่อรับองค์ประกอบที่มีดัชนีที่แน่นอน

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

คุณสามารถใช้วิธี eq หรือตัวเลือก :

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

มีอีกวิธีหนึ่งในการรับองค์ประกอบโดยดัชนีใน jQuery โดยใช้ CSS :nth-of-typepseudo-class:

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

มีตัวเลือกอื่น ๆที่คุณอาจใช้กับ jQuery เพื่อจับคู่องค์ประกอบที่คุณต้องการ

คุณสามารถข้าม jquery และใช้การติดแท็กสไตล์ CSS:

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