Javascript 如何在 jQuery 中显示所有子节点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13757051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show all child nodes in jQuery
提问by woodykiddy
<a href="javascript:(void);" id="lnkP">show all children</a>
<a href="javascript:(void);" id="lnkC1">hide child 1</a>
<a href="javascript:(void);" id="lnkC2">hide child 2</a>
<div id="p" style="display:none;">
<div id="c1">child 1</div>
<div id="c2">child 1</div>...
</div>?
$("#lnkP").click(function(){
$("#p").children().show(); //seems there's a problem here...
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});?
jsFiddle: http://jsfiddle.net/CBGsF/1/
jsFiddle：http: //jsfiddle.net/CBGsF/1/
What I am trying to do is:
我想做的是：
pis a parent container- click
show all childrenlink, display all child divsunderp - click
lnkC1orlnkC2to hide individual child div
p是父容器- 点击
show all children链接，显示 所有的子div的下p - 单击
lnkC1或lnkC2隐藏单个子 div
But it seems that I didn't get .children()working correctly. So how to fix it? Any ideas?
但似乎我没有正常.children()工作。那么如何修复呢？有任何想法吗？
回答by pai.not.pi
Since the parent (#pin your case) has a display:none, it's children won't be visible.
由于父母（#p在您的情况下）有一个display:none，它的孩子将不可见。
You'll need to show the parent first,
你需要先向父母展示，
$("#p")
.show()
.children().show();
(jQuery's chaining, very helpful)
（jQuery 的链接，非常有帮助）
Please try and get rid of the inline styling (it gets unmanageable after a while), use classes as much as possible.
请尝试摆脱内联样式（一段时间后它变得无法管理），尽可能多地使用类。
You can have a class in css,
你可以在css中有一个类，
.displayNone
{
display: none;
}
.displayBlock
{
display: block;
}
And then use jquery methods .removeClass(), .addClass()or .toggleClass()to show/hide your elements.
然后使用 jquery 方法.removeClass()，.addClass()或.toggleClass()显示/隐藏您的元素。
This is just a recommendation :)
这只是一个建议:)
Test link: http://jsfiddle.net/CBGsF/8/
测试链接：http: //jsfiddle.net/CBGsF/8/
回答by KingKongFrog
You need to show the #palso
你需要显示#p也
Updated fiddle: http://jsfiddle.net/CBGsF/7/
更新小提琴：http: //jsfiddle.net/CBGsF/7/
$("#lnkP").click(function(){
$("#p").show().children().show(); //Add show() before children.show call
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});?
回答by Anujith
Updated fiddle : http://jsfiddle.net/CBGsF/5/
更新小提琴：http: //jsfiddle.net/CBGsF/5/
$("#lnkP").click(function(){
$("#p").show();
$("#p").children().show();
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});?
回答by Sridhar Narasimhan
Parent element is set to "display":"None" That is the problem
父元素设置为 "display":"None" 就是这个问题
$("#p").css("display","block"); //is required in show all anchor click
Check the fiddle
检查小提琴
Thanks
谢谢
回答by halfer
(Posted solution on behalf of the question author).
（代表问题作者发布解决方案）。
I thought .children()would search for invisible nodes as well. Well, I was wrong on that.
我认为.children()也会搜索不可见的节点。嗯，我错了。
