Tôi có trang HTML:Làm thế nào để ẩn tất cả các phần tử ngoại trừ một phần bằng cách sử dụng jquery?
<head></head>
<body>
<div>
<div>
<div id="myDiv">
</div>
</div>
</div>
</body>
Làm thế nào để ẩn tất cả các div, và chỉ có myDiv bên trong cơ thể sử dụng jquery?
Cập nhật
Trang này có thể chứa một số yếu tố html khác như một số bảng biểu, neo, p, và tôi chỉ muốn xem các yếu tố myDiv.
này nên làm việc:
$('div:not(#myDiv)').hide(); // hide everything that isn't #myDiv
$('#myDiv').appendTo('body'); // move #myDiv up to the body
Cập nhật:
Nếu bạn muốn ẩn tất cả mọi thứ đó, không chỉ div yếu tố, sử dụng này để thay thế:
$('body > :not(#myDiv)').hide(); //hide all nodes directly under the body
$('#myDiv').appendTo('body');
Có lẽ đơn giản là để bao bọc toàn bộ phần "hideable" của trang trong phần tử chứa lớn và ẩn trực tiếp.
Giống như vậy:
<body>
<div id="contents">
<!-- a lot of other stuff here -->
<div id="myDiv>
</div>
</div>
</body>
Sau đó, bạn chỉ có thể làm được điều này, đó là sạch hơn và nhanh hơn:
$('#contents').hide();
$('#myDiv').appendTo('body');
$("div").each(function() { $(this).toggle(!!this.id); });
Lưu ý rằng điều này sẽ rõ ràng hiển thị #myDiv. Nếu bạn chỉ muốn ẩn divs khác:
$("div:not(#myDiv)").show();
Sau đó, bạn có thể làm:
$("#myDiv").appendTo("body");
Nếu bạn quan chỉ là để xem nội dung đó và không thấy bất cứ điều gì khác, bạn luôn có thể chỉ làm cái này. Bạn không cần jQuery:
document.body.innerHTML=document.getElementById('myDiv').innerHTML;
Một cách tiếp cận chung đẹp:
$('#the_id').siblings().hide()
$('#the_id').parents().siblings().hide()
trình cho bất kỳ loại phần tử.
+1 đây là câu trả lời đúng. – Christophe
Tôi có bỏ lỡ điều gì đó hay cách tiếp cận này không hoạt động đối với các phần tử được lồng sâu bởi vì nó không đệ quy ?! –
Bạn sẽ sử dụng '# the_id' của phần tử bạn muốn hiển thị, bất kể lồng nhau được lồng sâu như thế nào. Bộ sưu tập 'parent()' bao gồm tất cả các tổ tiên (up-đệ quy). Bạn không thể che giấu cha mẹ của phần tử hoặc chính yếu tố đó sẽ bị ẩn; và bạn không thể ẩn con của phần tử hoặc chính phần tử sẽ không có nội dung (đối với các loại phần tử mà khái niệm đó áp dụng). –
nếu trang chứa một số yếu tố khác, không phải tất cả các DIV, ví dụ: một số bảng, liên kết và tôi chỉ muốn hiển thị myDiv? –
chỉ về chủ đề hiệu quả, nó sẽ được * nhiều * nhanh hơn để chạy '$ (" * "). Hide(); $ ("# myDiv"). show(); 'so với' $ ("*: không (#myDiv)") ' – nickf
@nickf điểm tốt, mặc dù tôi đã cập nhật một cái gì đó phải nhanh hơn cả hai tùy chọn: '$ ('body>: not (#myDiv)'). hide()'. Nói chung không có quá nhiều yếu tố trực tiếp bên dưới phần tử cơ thể. Thêm vào đó, như tôi đã đề cập đến trong câu trả lời, nó thậm chí còn tốt hơn để bỏ qua điều vô nghĩa đó và đi cho một phần tử bao bọc. –