jQuery: จะไปหาลูกคนใดคนหนึ่งของผู้ปกครองได้อย่างไร?

เพื่อให้เป็นตัวอย่างที่เรียบง่ายฉันได้บล็อกต่อไปนี้ซ้ำแล้วซ้ำอีกในหน้าหลาย ๆ ครั้ง (สร้างแบบไดนามิก):

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

เมื่อคลิกฉันจะไปที่แม่ของลิงก์โดยใช้:

$(".mylink").click(function() {
   $(this).parents(".box").fadeOut("fast");
});

อย่างไรก็ตาม ... ฉันต้องไปหา<div class="something1">พ่อแม่คนนั้น

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

ฉันพยายามแล้ว:

parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.

ทุกคน? ขอบคุณ.

โทรจะกลับองค์ประกอบผู้ปกครองทั้งหมดที่ตรงกับตัวเลือก.parents(".box .something1") .box .somethingในคำอื่น ๆ ก็จะกลับองค์ประกอบของผู้ปกครองที่มีและภายใน.something1.box

คุณต้องรับลูกของผู้ปกครองที่ใกล้เคียงที่สุดดังนี้:

$(this).closest('.box').children('.something1')

รหัสนี้เรียก.closestเพื่อให้พาเรนต์ด้านในสุดตรงกับตัวเลือกจากนั้นเรียก.childrenใช้องค์ประกอบหลักนั้นเพื่อค้นหาลุงที่คุณกำลังมองหา

$(this).parent()

การลัดเลาะต้นไม้เป็นเรื่องสนุก

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

และวิธีอื่น ๆ อีกมากมายคุณอาจพบว่าเอกสารเหล่านี้มีประโยชน์

สิ่งนี้จะค้นหาผู้ปกครองคนแรกที่มีคลาสboxจากนั้นค้นหาคลาสย่อยแรกที่มีการจับคู่ regex somethingและรับ id

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")

ถ้าฉันเข้าใจปัญหาของคุณถูกต้อง$(this).parents('.box').children('.something1')นี่คือสิ่งที่คุณกำลังมองหาใช่หรือไม่?

คุณสามารถใช้.each()กับ.children()และตัวเลือกภายในวงเล็บ:

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});