Question

我试图在jQuery中隐藏第三个子div，但是它隐藏了第一个子div div。

我正在尝试下面的代码： -

Html： -

<div id="parent-1">
    <div id="child-1" class="child">CHILD 1
       <div id="sub-child-1" class="subchild">SUB CHILD 1</div>
       <div id="sub-child-2" class="subchild">SUB CHILD 2</div>
       <div id="sub-child-3" class="subchild">SUB CHILD 3</div>
    </div>
    <div id="child-2" class="child">CHILD 2</div>
    <div id="child-3" class="child">CHILD 3</div>
</div>

Jquery： -

$(document).ready(function () {
   $('div#parent-1 div:eq(2)').css("display", "none");
});

我需要在这里隐藏child-3。但它隐藏了sub-child-3。

这里是jsfiddle

有什么建议吗？

提前致谢。

Answer 1

$(document).ready(function () {
   $('div#parent-1 > div:eq(2)').css("display", "none");
});

>完成所有工作。

Answer 2

试试这个

$(document).ready(function () {
   $('#parent-1 .child').eq(2).css("display", "none");
});

或者您可以使用

$('#parent-1 > div:eq(2)').css("display", "none");

表示'parent-1'

的相对子项

Answer 3

试试这个：（更新）

$('#parent-1').children('div').eq(2).hide();

或

$('#parent-1 > div').eq(2).hide();

.hide()与display : none;
的作用相同
稍后您可以使用.show()再次显示该元素。（如果你愿意的话）。

Answer 4

非常简单地只使用css：

#child-3{
   display:none;
}

Answer 5

这应该有效

$('#child-3',$('#parent-1')).hide();

在jquery中隐藏第三个子div

5 个答案: