[英]How to show all child nodes in jQuery
<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: 我想要做的是:
p
is a parent container p
是父容器 show all children
link, display all child divs under p
show all children
链接,在p
下显示所有子div lnkC1
or lnkC2
to hide individual child div lnkC1
或lnkC2
以隐藏单个子div But it seems that I didn't get .children()
working correctly. 但似乎我没有让
.children()
正常工作。 So how to fix it? 那么如何解决呢? Any ideas?
有任何想法吗?
Since the parent ( #p
in 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/
You need to show the #p
also 你还需要显示
#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();
});
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();
});
Parent element is set to "display":"None" That is the problem 父元素设置为“显示”:“无”这是问题所在
$("#p").css("display","block"); //is required in show all anchor click
Check the fiddle 检查小提琴
http://jsfiddle.net/CBGsF/6/ http://jsfiddle.net/CBGsF/6/
Thanks 谢谢
(Posted solution on behalf of the question author) . (代表问题作者发布解决方案) 。
I thought .children()
would search for invisible nodes as well. 我以为
.children()
也会搜索不可见的节点。 Well, I was wrong on that. 好吧,我错了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.