รับลูกคนที่สองโดยใช้ jQuery

$(t).html()

ผลตอบแทน

<td>test1</td><td>test2</td>

ฉันต้องการดึงข้อมูลที่สองtdจาก$(t)วัตถุ ฉันค้นหาวิธีแก้ปัญหา แต่ไม่มีอะไรทำงานให้ฉัน ความคิดวิธีการรับองค์ประกอบที่สอง?

คว้าลูกคนที่สอง:

$(t).children().eq(1);

หรือคว้าลูกคนที่สอง<td>:

$(t).children('td').eq(1);

ต่อไปนี้เป็นวิธีแก้ปัญหาที่อาจชัดเจนในการอ่านรหัส:

วิธีรับลูกที่สองของรายการที่ไม่ได้เรียงลำดับ:

   $('ul:first-child').next()

และอีกตัวอย่างที่ละเอียดมากขึ้น: รหัสนี้ได้รับข้อความของแอตทริบิวต์ 'ชื่อ' ขององค์ประกอบลูกที่สองของ UL ระบุว่าเป็น 'my_list':

   $('ul#my_list:first-child').next().attr("title")

ในตัวอย่างที่สองนี้คุณสามารถกำจัด'ul'ที่จุดเริ่มต้นของตัวเลือกเนื่องจากเป็นการซ้ำซ้อนเนื่องจาก ID ควรไม่ซ้ำกันสำหรับหน้าเดียว มีเพียงเพื่อเพิ่มความชัดเจนให้กับตัวอย่าง

หมายเหตุเกี่ยวกับประสิทธิภาพและหน่วยความจำตัวอย่างสองตัวอย่างนี้เป็นตัวแสดงที่ดีเนื่องจากไม่ทำให้ jQuery บันทึกรายการองค์ประกอบulที่ต้องถูกกรองหลังจากนั้น

เป็นอย่างไรบ้าง:

$(t).first().next()

ปรับปรุงที่สำคัญ:

นอกเหนือจากความสวยงามของคำตอบแล้วคุณยังต้องคำนึงถึงประสิทธิภาพของโค้ดด้วย ดังนั้นจึงเป็นเรื่องที่เกี่ยวข้องที่จะต้องรู้ว่าอะไรอยู่ใน$(t)ตัวแปร มันเป็นอาร์เรย์ของ<TD>หรือมันเป็น<TR>โหนดที่มีหลาย<TD>sภายในมันได้หรือไม่ หากต้องการแสดงให้เห็นถึงประเด็นเพิ่มเติมดูคะแนน jsPerf ใน<ul>รายการที่มี<li>เด็ก50 คน:

http://jsperf.com/second-child-selector

$(t).first().next()วิธีที่เร็วที่สุดที่นี่โดยไกล

แต่ในทางกลับกันหากคุณใช้<tr>โหนดและค้นหา<td>เด็ก ๆ และเรียกใช้การทดสอบเดียวกันผลลัพธ์จะไม่เหมือนกัน

หวังว่ามันจะช่วย :)

ฉันไม่เห็นมันพูดถึงที่นี่ แต่คุณสามารถใช้ตัวเลือกข้อมูลจำเพาะ CSS ได้ ดูเอกสาร

$('#parentContainer td:nth-child(2)')

ลองสิ่งนี้:

$("td:eq(1)", $(t))

หรือ

$("td", $(t)).eq(1)

นอกเหนือจากการใช้วิธี jQuery คุณสามารถใช้cellsคอลเลกชันดั้งเดิมที่<tr>ให้คุณ

$(t)[0].cells[1].innerHTML

สมมติว่าtเป็นองค์ประกอบ DOM คุณสามารถข้ามการสร้างวัตถุ jQuery

t.cells[1].innerHTML

_{มันน่าแปลกใจที่เห็นว่าไม่มีใครพูดถึงวิธีการทำ JS ของเจ้าของภาษา ..}

ไม่มี jQuery:

เพียงเข้าถึงchildrenคุณสมบัติขององค์ประกอบหลัก มันจะส่งคืนHTMLCollection แบบสดขององค์ประกอบลูกซึ่งสามารถเข้าถึงได้โดยดัชนี หากคุณต้องการรับลูกคนที่สอง:

parentElement.children[1];

ในกรณีของคุณสิ่งนี้สามารถใช้งานได้: (ตัวอย่าง)

var secondChild = document.querySelector('.parent').children[1];

console.log(secondChild); // <td>element two</td>

<table>
    <tr class="parent">
        <td>element one</td>
        <td>element two</td>
    </tr>
</table>

นอกจากนี้คุณยังสามารถใช้การรวมกันของ CSS3 เตอร์ A / และใช้ประโยชน์querySelector() :nth-of-type()วิธีนี้อาจทำงานได้ดีขึ้นในบางกรณีเนื่องจากคุณสามารถระบุประเภทองค์ประกอบได้ในกรณีนี้td:nth-of-type(2) (ตัวอย่าง)

var secondChild = document.querySelector('.parent > td:nth-of-type(2)');

console.log(secondChild); // <td>element two</td>

ใช้.find()วิธีการ

$(t).find("td:eq(1)");

td:eq(x) // x is index of child you want to retrieve. eq(1) means equal to 1. //1 denote second element

คุณสามารถใช้สองวิธีใน jQuery ตามที่ระบุด้านล่าง -

การใช้ jQuery: nth-child Selector คุณวางตำแหน่งขององค์ประกอบเป็นอาร์กิวเมนต์ซึ่งเป็น 2 ตามที่คุณต้องการเลือกองค์ประกอบที่สอง

$( "ul li:nth-child(2)" ).click(function(){
  //do something
});

ใช้ jQuery: eq () ตัวเลือก

หากคุณต้องการได้องค์ประกอบที่แน่นอนคุณต้องระบุค่าดัชนีของรายการ องค์ประกอบรายการเริ่มต้นด้วยดัชนี 0 ในการเลือกองค์ประกอบที่ 2 ของ li คุณต้องใช้ 2 เป็นอาร์กิวเมนต์

$( "ul li:eq(1)" ).click(function(){
  //do something
});

ดูตัวอย่าง: รับองค์ประกอบลูกที่สองของรายการใน jQuery