javascript - Hide third child div in jquery - Stack Overflow

admin管理员组

文章数量:1277271

I am trying to hide third child div in jQuery , but its hide first child div subchild.

I am trying with below code :-

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");
});

I need to hide child-3 here. but it is hiding sub-child-3.

here is jsfiddle

Any suggestion??

Thanks in advance.

I am trying to hide third child div in jQuery , but its hide first child div subchild.

I am trying with below code :-

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");
});

I need to hide child-3 here. but it is hiding sub-child-3.

here is jsfiddle

Any suggestion??

Thanks in advance.

• javascript
• jquery

Share Improve this question Follow asked May 17, 2013 at 6:48 RoopendraRoopendra 7,7761616 gold badges7070 silver badges9494 bronze badges 4

• 2 Don't use tagNames in front of an id selector - it causes jQuery to do more work than needed. Just use #parent-1 – Ian Commented May 17, 2013 at 6:51
• @lan : thanks for suggestion . I will take care in my code. – Roopendra Commented May 17, 2013 at 6:53
• You can directly use the ID [child-3] to hide the div. – Janak Commented May 17, 2013 at 7:03
• I know it is simple @ janak shah but my requirement is nothing like that. Thnks man for suggestion. – Roopendra Commented May 17, 2013 at 7:04

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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

The > does it all.

Try like this

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

or you can use like

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

that represents the relative childs of the 'parent-1'

Try this: (Updated)

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

or

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

.hide() will work same as display : none;

Later you can use .show() to display the element again. (if you want to).

very simply do it with css only:

#child-3{
   display:none;
}

this should work

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

本文标签： javascriptHide third child div in jqueryStack Overflow