Truy cập jQuery con của cha mẹ hiện tại

Question

Tôi mới làm quen với jQuery và tôi đang cố gắng làm như sau: truy cập vào con của cha mẹ hiện tại của div (hoặc nói cách khác: một đứa con khác của cha mẹ hiện tại của div). Mã của tôi trông như thế này (đây là những gì tôi đã cố gắng):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<script> 
$(document).ready(function() { 
    $("div.head").click(function() { 
     $(this).parent().("div.content").slideToggle("normal"); //<- how? 
    }); 
}); 
</script> 

<div class="box"> 
<div class="head"> 
    Example 
</div> 
<div class="content"> 
    Content here. 
</div> 
</div> 

Tôi đang cố gắng để làm điều đó theo cách này bởi vì sau đó tôi chỉ có thể làm cho nhiều ô cùng một cách mà không phải thêm js thêm để làm cho nó hoạt cho mỗi hộp (chuyển đổi ẩn/hiển thị nội dung của mỗi ô).

Answer 1

Nếu hai yếu tố này là vào mức độ DOM cùng sau đó bạn có thể sử dụng .siblings():

$(function() { 
    $(".head").click(function() { 
     $(this).siblings(".content").slideToggle("normal"); 
    }); 
}); 

Đây là một bản demo: http://jsfiddle.net/L5kqs/1/

selector của ông cần một .children() hoặc một .find():

$(this).parent().children(".content").slideToggle("normal"); 

Cũng lưu ý rằng selectors của bạn sẽ chạy nhanh hơn nếu bạn bỏ qua các tên thẻ. Chỉ khi có nhiều nút DOM để tìm kiếm thông qua đó sẽ cải thiện hiệu suất.

Nếu bạn muốn tìm hiểu thêm về .siblings() đây sẽ là một khởi đầu tốt đẹp: http://api.jquery.com/siblings

Answer 2

<script> 
$(document).ready(function() { 
    $("div.head").click(function() { 
     $(this).next("div.content").slideToggle("normal"); //<- easy 
    }); 
}); 
</script> 

Answer 3

Nếu tất cả các bạn quan tâm là phần tử ngay lập tức sau đó, sử dụng happytime harry's solution trong đó sử dụng .next(), ví dụ:

$(this).next(".content").slideToggle("normal"); 

Nếu bạn đang tìm kiếm cái gì tổng quát hơn, sử dụng một trong các cách sau :

// Search for elements which are direct children of parent 
$(this).parent().children(".content").slideToggle("normal"); 

// Search for siblings (same as above, but will not include $(this)) 
$(this).siblings(".content").slideToggle("normal"); 

// Search within all descendents of parent 
$(this).parent().find(".content").slideToggle("normal"); 

Answer 4

Bạn có thể sử dụng .find .children để có được những div.content:

$(document).ready(function() { 
    $("div.head").click(function() { 
     $(this).parent().children("div.content").slideToggle("normal"); 
    }); 
}); 

Hoặc bạn có thể sử dụng .siblings:

$(document).ready(function() { 
    $("div.head").click(function() { 
     $(this).siblings("div.content").slideToggle("normal"); 
    }); 
}); 

Answer 5

bạn có thể thử

$(document).ready(function() { 
    $("div.head").click(function() { 
     $(this).parent().find(".content").slideToggle("normal"); //<- how? 
    }); 
}); 

hoặc sử dụng anh chị em

$(this).siblings(".content").slideToggle("normal"); 

Answer 6

một cái gì đó như thế này là đủ

$(".head").bind("click", function(){ 
    $(this).parent().find(".content").slideToggle("normal"); 
})