วิธีรับองค์ประกอบที่ jQuery ที่ n


311

ใน jQuery $("...").get(3)ส่งคืนองค์ประกอบ DOM ที่ 3 ฟังก์ชั่นการคืนองค์ประกอบ jQuery ที่ 3 คืออะไร?

คำตอบ:


310

ทำไมไม่เรียกดูหน้าตัวเลือก (สั้น) ก่อน

นี่คือ: :eq()ผู้ประกอบการ มันถูกใช้เหมือนget()แต่จะส่งคืนวัตถุ jQuery

หรือคุณสามารถใช้.eq()ฟังก์ชั่นได้เช่นกัน


23
ไม่ควรที่จะเป็น.eq()แทน:eq()?
RubenGeert

15
ใช่.eq()เหมาะสมกว่าสำหรับคำถามของ OP :eq()จะใช้ภายในพารามิเตอร์สตริงถึง$ในขณะที่.eq()เป็นวิธีการในวัตถุ jQuery ที่มีอยู่
mjswensen

55
ฉันสาบานฉันต้องไปและมองนี้ขึ้นทุก เดียว เวลา
ivarni

3
@JoelWorsham ขึ้นอยู่กับพฤติกรรมที่ต้องการ $('select').find('option').eq(n)โดยทั่วไปจะไม่สนใจการจัดกลุ่มและรับตัวเลือกทั้งหมดโดยรวม หากคุณต้องการมันสำหรับแต่ละกลุ่มคุณจำเป็นต้องมีสิ่งต่อไปนี้:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })
Dykam

4
"ทำไมไม่เรียกดูหน้าตัวเลือก (สั้น) ก่อน" - เพราะ "eq" เป็นชื่อที่ไม่ดีมากและฉันมักจะข้ามมันเป็น eq สำหรับฉันหมายถึงการเปรียบเทียบ ....
mmlac

309

คุณสามารถใช้: eq selector เช่น:

$("td:eq(2)").css("color", "red"); // gets the third td element

หรือฟังก์ชั่นeq (int) :

$("td").eq(2).css("color", "red");

นอกจากนี้โปรดจำไว้ว่าดัชนีนั้นเป็นแบบศูนย์


7
เป็นคำพ้องความหมายคุณยังสามารถใช้:nth()ตัวเลือก - เพื่อไม่ให้สับสนกับ:nth-child()
user123444555621

คำตอบที่ดีกว่าและไม่ถูกแก้ไข 3 ปีหลังจากที่ความจริง :)
แอนดรู

ขอบคุณที่อธิบายวิธีใช้ตัวเลือก / ฟังก์ชั่นจริง ๆ
Joseph Rogers

49

หากคุณมีการควบคุมแบบสอบถามที่สร้างวัตถุ jQuery ใช้ :eq()

$("div:eq(2)")

หากคุณไม่สามารถควบคุมมันได้ (ตัวอย่างเช่นมันถูกส่งผ่านจากฟังก์ชั่นอื่นหรือบางอย่าง) จากนั้นใช้ .eq()

var $thirdElement = $jqObj.eq(2);

หรือถ้าคุณต้องการส่วนของพวกเขา (พูดองค์ประกอบที่สามสี่และห้า) ใช้ .slice()

var $third4th5thElements = $jqObj.slice(2, 5);

กำลังมองหาชิ้น แต่ไม่แน่ใจว่าจะค้นหาอย่างไร ขอขอบคุณที่ทำมากกว่าสิ่งที่จำเป็นในคำถามเดิม
Samik R

4
สำหรับผู้ที่สะดุดกับคำตอบนี้จุดที่เป็นประโยชน์ที่ควรทราบก็คือตัวเลือก nth-child จะเป็น 1 ในขณะที่: eq หรือ. eq () เป็น 0 ตาม
Sudhanshu Mishra

1
คุณควรใช้.eq()แทนของ:eq()จริง เพิ่มประสิทธิภาพเล็กน้อย
Qwerty

13

ฉันคิดว่าคุณสามารถใช้สิ่งนี้

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

พบว่า li ที่สองในแต่ละ ul ที่ตรงกันและบันทึกไว้


11

.eq () จำนวนเต็ม -n ระบุตำแหน่ง 0-based ขององค์ประกอบ

Ex:

พิจารณาหน้าเว็บที่มีรายการง่าย ๆ :

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

เราสามารถใช้วิธีนี้กับชุดของรายการ:

$( "li" ).eq( 2 ).css( "background-color", "red" );

สำหรับข้อมูลเพิ่มเติม: .eq ()


3

หากคุณมีวัตถุ jquery อยู่ในตัวแปรอยู่แล้วคุณสามารถใช้มันเป็นอาร์เรย์ที่มีการทำดัชนีตามปกติโดยไม่ต้องใช้ jquery:

var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
   var row = all_rows[i];
   //additionally, you can use it again in a jquery selector
   $(row).css("background-color","black");
}

แม้ว่าตัวอย่างข้างต้นจะไม่เป็นประโยชน์ แต่อย่างใด แต่ก็แสดงให้เห็นว่าคุณสามารถจัดการวัตถุที่สร้างโดย jquery เป็นอาร์เรย์ที่จัดทำดัชนีได้อย่างไร


คำแนะนำที่ถูกต้องและอีกหนึ่งคำแนะนำ (มีประโยชน์หวังว่า): หากแถวมีรายการ<select>องค์ประกอบและคุณต้องการองค์ประกอบ combobox ที่เลือกให้ใช้$(row).val();
Matt

2

หากฉันเข้าใจคำถามของคุณถูกต้องคุณสามารถสรุปฟังก์ชั่น get ดังนี้:

var $someJqueryEl = $($('.myJqueryEls').get(3));

3
นี่เป็นเพียง "วิธีที่ยาก" และนี่คือสิ่งที่eq()ให้คุณฟรี
Caumons

1

หากคุณต้องการดึงองค์ประกอบ / โหนดหรือแท็กแบบวนซ้ำเช่น

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

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

$('.weekdays:eq(n)');

เช่น

$('.weekdays:eq(0)');

เช่นเดียวกับวิธีอื่น

$('.weekday').find('p').first('.weekdays').next()/last()/prev();

แต่วิธีแรกนั้นมีประสิทธิภาพมากกว่าเมื่อHTML <tag>มีชื่อคลาสที่ไม่เหมือนใคร

หมายเหตุ: วิธีที่สองจะใช้เมื่อไม่มีชื่อคลาสในองค์ประกอบเป้าหมายหรือโหนด

สำหรับการติดตามเพิ่มเติมhttps://api.jquery.com/eq/


0

สำหรับการวนซ้ำโดยใช้ตัวเลือกดูเหมือนจะไม่สมเหตุสมผลเลย:

var some = $( '...' );

for( i = some.length -1; i>=0; --i )
{
   // Have to transform in a jquery object again:
   //
   var item = $( some[ i ] );

   // use item at will
   // ...
}

0

ตัวอย่างสดเพื่อเข้าถึงและลบองค์ประกอบ Nth ด้วย jQuery:

<html>
<head></head>
<body>
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li:eq(1)').hide();
      });
    </script>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
</body>
</html>

เมื่อมันรันจะมีสองรายการในรายการเรียงลำดับที่แสดงเป็นลำดับแรกและสาม ที่สองถูกซ่อนอยู่


PS: การนับเริ่มต้นจาก 0; อันดับแรกคือที่ดัชนี 0, ที่สองคือที่ดัชนี 1 และอื่น ๆ ....
KNU

0
 $(function(){
            $(document).find('div').siblings().each(function(){
                var obj = $(this);
                obj.find('div').each(function(){
                    var obj1 = $(this);
                    if(!obj1.children().length > 0){
                        alert(obj1.html());
                    }
                });

            });
        });

<div id="2">
    <div>
        <div>
            <div>XYZ Pvt. Ltd.</div>
        </div>
    </div>
</div>
<div id="3">
    <div>
        <div>
            <div>ABC Pvt Ltd.</div>
        </div>
    </div>
</div>

"$ (ฟังก์ชั่น () {" แรกของการตกฉันได้สร้างฟังก์ชั่นที่ไม่ระบุชื่อซึ่งยิงโดยอัตโนมัติภายในนั้นฉันพบสามผู้ปกครอง div โดยใช้พี่น้องจากนั้นฉันทำซ้ำใน div 3 ผู้ปกครองทั้งหมดและตรวจสอบความยาวของเด็กทุกคน ฉันจะทราบได้อย่างไรว่าเป็น div ล่าสุดหรือไม่อยู่ใน parent div ตอนนี้ฉันกำลังแจ้งเตือน html div ล่าสุดของ div หลัก 3 ตัวทุกครั้ง
Sanjay Verma

คุณสามารถแก้ไขคำตอบของคุณแทนที่จะให้ข้อมูลในความคิดเห็น :)
T3 H40
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.