Jquery: Ẩn tất cả trẻ em, sau đó hiển thị một phần tử cụ thể

Question

Tôi muốn ẩn tất cả các phần tử con trong div. Và sau đó hiển thị một cái cụ thể được truyền cho hàm.

function subDisplay(name) { 
    $("#navSub").each(function() { 
     $(this).hide(); 
    }); 
    $(name).show(); 
} 

sau đó tôi gọi hàm từ một sự kiện onmouse như: subDisplay(#DivIwantToShow); Nhưng không có gì hiển thị ...

am i làm gì sai?

Answer 1

Bạn cần ẩn các con và không chứa div chứa.

$("#navSub").children().hide();

Vì vậy, bây giờ nếu div bạn đang cố gắng để hiển thị là một yếu tố trong div mẹ nó vẫn sẽ hiển thị trong khi những người khác ở ẩn.

Answer 2

function subDisplay(name) { 
    $("#navSub").hide(); 
    $('#'+name).show(); 
} 

Answer 3

Cố gắng có nó bên ngoài vòng lặp, như vậy:

function subDisplay(name) { 

    $("#navSub").hide(); 

    $(name).show(); 
} 

http://jsfiddle.net/peduarte/m2pj8/

Answer 4

Để tóm tắt những ý kiến ​​rất lớn từ @dotweb và @ Matt;

function subDisplay(name) { 
    $('#navSub').hide(); 
    $(name).show(); 
} 

subDisplay('#DivIwantToShow'); 

Answer 5

Nếu bạn đang nhắm mục tiêu trẻ em của #navSub, bạn cần nhắm mục tiêu họ và giấu họ, chứ không phải là yếu tố navSub; mà bạn có thể thực hiện bằng phương pháp children();

function subDisplay(name) { 
    $('#navSub').children().hide(); 
    $(name).show(); 
}; 

Nếu không, có vẻ như bạn có nhiều phần tử có cùng ID trong DOM của bạn, điều này không được phép.

Sau đó, bạn cần chuyển một chuỗi (một bộ chọn jQuery hợp lệ) đến subDisplay();

subDisplay('#DivIwantToShow'); 

Answer 6

nếu tên của nguyên tố này được thông qua vào sử dụng tên này:

if($(this).attr('name') != name){ 
    //Hide it 
    } else { 
    //show it 
}