jQuery select or hide deeply nested div within a div with a class

Question

I'm looking to hide a deeply nested div (with a class or ID name) within a container div with only class name. The container div is generated by an application so I cannot set an ID on it. I don't know exactly how many levels the div is generated so I cannot use a path - because that path sometimes changes depending on the page generated. It's almost that I need to use a loop or something.

Here's what I have

<div class ="container">
   <div class ="level1">
     <div class = "level2">
        <other nested  divs and html here...>
                 <div class = "levelN" id="idLevelN">
                      content to hide 
                         <more divs and html here..../>

                 </div>
        </other nested  divs and html here...>
     </div>
   </div>
</div>

I want to hide the div with class = "levelN" id="idLevelN".

I tried all kinds of things but I give up. I tried to use find(), filter(), etc... Help? Thanks

Is it levelN or is N a placeholder? If it's levelN you could do this `$('.levelN#idLevelN').hide()` — bcr, Jun 10 '15 at 20:29

score 0 · Answer 1 · edited May 23 '17 at 10:30

I'm looking to hide a deeply nested div (with a class or ID name) within a container div with only class name.I don't know exactly how many levels the div is generated

Assuming you have this :

<div id="SearchHere">
  <div>
    <div>
      <div></div>
    </div>
  </div>
  <div></div>
  <div>
    <div>
      <div>
        <div >aaaaa</div> /* you want this*/
      </div>
    </div>
  </div>
  <div>
    <div></div>
  </div>
</div>

Then you can do this :

jQuery.fn.deepestDiv = function()
 {
     var $target = this.children(),
         $next = $target;
     while ($next.length)
     {
         $target = $next;
         $next = $next.children();
     }
     return $target;
 }

Now :

  $("#SearchHere").deepestDiv().css('color','red')

enter image description here

http://jsbin.com/kedobuyumo/3/edit

Sorry please don't assume that my div is last. There may be other divs within that div. Thanks — The Profiler, Jun 10 '15 at 19:11

score 0 · Answer 2 · answered Jun 10 '15 at 19:14

0

You should be able to just access this by ID since IDs are unique for a page.

$('#idLevelN').hide()

However, I realize that in practice this is not always the case so you might need to use the class instead.

$('div.container div.levelN').hide()

answered Jun 10 '15 at 19:14

Guy Royse

2,739
12
9

I need to make sure my div gets hidden only when it's within the div with class ="container" . Otherwise I want to leave it alone. – The Profiler Jun 10 '15 at 19:17

Mark C. · Accepted Answer · 2015-06-10T19:25:28.323

0

You can use the .children() selector to filter all elements that are children of your selected element.

You can also use .parents() to check the div with the container class is valid (is a parent).

Like:

   if ($( '#idLevelN' ).parents('.container').length){
     $( '#idLevelN').children().hide();
}

Here's a Fiddle

edited Jun 10 '15 at 19:25

answered Jun 10 '15 at 19:17

Mark C.

6,332
4
35
71

@TheProfiler I dont think this is what you asked. you said you have no idLevelN. you said you wanted to fined the deepest nested div inside a div with class which is what my answer is all about. this answer trustst on idLevelN but you dont have it – Royi Namir Jun 11 '15 at 04:17
1

No I didn't say the deepest div, I just say that's it's deep and don't know how many level. Mark C's suggestion worked for what I needed. Thanks everyone - Appreciated! – The Profiler Jun 11 '15 at 20:56

jQuery select or hide deeply nested div within a div with a class

3 Answers3