ใน jQuery $("...").get(3)
ส่งคืนองค์ประกอบ DOM ที่ 3 ฟังก์ชั่นการคืนองค์ประกอบ jQuery ที่ 3 คืออะไร?
ใน jQuery $("...").get(3)
ส่งคืนองค์ประกอบ DOM ที่ 3 ฟังก์ชั่นการคืนองค์ประกอบ jQuery ที่ 3 คืออะไร?
คำตอบ:
ทำไมไม่เรียกดูหน้าตัวเลือก (สั้น) ก่อน
นี่คือ: :eq()
ผู้ประกอบการ มันถูกใช้เหมือนget()
แต่จะส่งคืนวัตถุ jQuery
หรือคุณสามารถใช้.eq()
ฟังก์ชั่นได้เช่นกัน
.eq()
เหมาะสมกว่าสำหรับคำถามของ OP :eq()
จะใช้ภายในพารามิเตอร์สตริงถึง$
ในขณะที่.eq()
เป็นวิธีการในวัตถุ jQuery ที่มีอยู่
$('select').find('option').eq(n)
โดยทั่วไปจะไม่สนใจการจัดกลุ่มและรับตัวเลือกทั้งหมดโดยรวม หากคุณต้องการมันสำหรับแต่ละกลุ่มคุณจำเป็นต้องมีสิ่งต่อไปนี้:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })
คุณสามารถใช้: eq selector เช่น:
$("td:eq(2)").css("color", "red"); // gets the third td element
หรือฟังก์ชั่นeq (int) :
$("td").eq(2).css("color", "red");
นอกจากนี้โปรดจำไว้ว่าดัชนีนั้นเป็นแบบศูนย์
:nth()
ตัวเลือก - เพื่อไม่ให้สับสนกับ:nth-child()
หากคุณมีการควบคุมแบบสอบถามที่สร้างวัตถุ jQuery ใช้ :eq()
$("div:eq(2)")
หากคุณไม่สามารถควบคุมมันได้ (ตัวอย่างเช่นมันถูกส่งผ่านจากฟังก์ชั่นอื่นหรือบางอย่าง) จากนั้นใช้ .eq()
var $thirdElement = $jqObj.eq(2);
หรือถ้าคุณต้องการส่วนของพวกเขา (พูดองค์ประกอบที่สามสี่และห้า) ใช้ .slice()
var $third4th5thElements = $jqObj.slice(2, 5);
.eq()
แทนของ:eq()
จริง เพิ่มประสิทธิภาพเล็กน้อย
ฉันคิดว่าคุณสามารถใช้สิ่งนี้
$("ul li:nth-child(2)").append("<span> - 2nd!</span>");
พบว่า li ที่สองในแต่ละ ul ที่ตรงกันและบันทึกไว้
.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" );
หากคุณมีวัตถุ 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();
หากฉันเข้าใจคำถามของคุณถูกต้องคุณสามารถสรุปฟังก์ชั่น get ดังนี้:
var $someJqueryEl = $($('.myJqueryEls').get(3));
eq()
ให้คุณฟรี
หากคุณต้องการดึงองค์ประกอบ / โหนดหรือแท็กแบบวนซ้ำเช่น
<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/
สำหรับการวนซ้ำโดยใช้ตัวเลือกดูเหมือนจะไม่สมเหตุสมผลเลย:
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
// ...
}
<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>
เมื่อมันรันจะมีสองรายการในรายการเรียงลำดับที่แสดงเป็นลำดับแรกและสาม ที่สองถูกซ่อนอยู่
$(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>
.eq()
แทน:eq()
?