jQuery: Làm thế nào để có được một đứa con cụ thể của cha mẹ?

Question

Để cung cấp một ví dụ đơn giản, tôi đã có các khối sau lặp đi lặp lại trên nhiều trang lần (nó tạo động):

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

Khi nhấn vào, tôi có thể nhận để phụ huynh của liên kết với:

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

Tuy nhiên ... Tôi cần truy cập vào số <div class="something1"> của phụ huynh cụ thể đó.

Về cơ bản, ai đó có thể cho tôi biết cách đề cập đến anh chị em cấp cao hơn mà không thể trực tiếp tham khảo trực tiếp? Hãy gọi nó là anh trai lớn. Một tham chiếu trực tiếp đến tên lớp của anh trai lớn sẽ gây ra mọi trường hợp của yếu tố đó trên trang để mờ dần - đó không phải là hiệu ứng mong muốn.

Tôi đã thử:

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

Bất cứ ai? Cảm ơn.

Answer 1

Gọi .parents(".box .something1") sẽ trả về tất cả các phần tử gốc khớp với công cụ chọn .box .something. Nói cách khác, nó sẽ trả về các phần tử cha là .something1 và nằm trong số .box.

Bạn cần phải nhận những đứa trẻ của cha mẹ gần gũi nhất, như thế này:

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

Mã này gọi .closest để có được phụ huynh trong cùng phù hợp với một chọn, sau đó gọi .children vào đó yếu tố phụ huynh để tìm ra chú bạn 'Đang tìm kiếm.

Answer 2

$(this).parent() 

Tree traversal là niềm vui

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

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

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

Và nhiều hơn nữa cách khác nhau, bạn có thể tìm thấy những docs hữu ích.

Answer 3

Nếu tôi hiểu chính xác vấn đề của bạn, $(this).parents('.box').children('.something1') Đây có phải là những gì bạn đang tìm kiếm không?

Answer 4

Bạn có thể sử dụng .each() với .children() và một selector trong ngoặc đơn:

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

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

Answer 5

này sẽ tìm ra cha mẹ đầu tiên với lớp box sau đó tìm thấy những lớp đứa con đầu lòng với regex phù hợp với something và nhận được id.

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