Question

First:

  .closest('.notice')

It will take .notice itself or it will take whats nearest the .notice up the dom tree?

.next('.notice') – it will grab whats down the dom tree, right?

Another one:

$('#celebTree ul').hide().before('<div class="bla"></div>').prev().addClass('handle closed')

with the .prev jQuery should select an element before “bla” and apply the class. But it is applying the class to the element that I am inserting with .before method. Why it is like this?

Answer 1

.closest('notice') is the closest parent that matches or the element itself if it matches:

<div class="notice"> //This will be selected with $("#target").closest(".notice")
    <div id="target"></div>
</div>

<div class="notice">
    <div id="target" class="notice"></div>  //This will be selected with $("#target").closest(".notice")
</div>

.next('notice') selects the next element sibling if it matches:

<div id="target"></div>
<div class="notice"></div> //This will be selected with $("#target").next(".notice")

<div id="target"></div>  //NOTHING will be selected with $("#target").next(".notice")
<div></div>

.before() doesn’t return a new jQuery object, it returns the old one that you inserted content before to:

$('#celebTree ul').hide().before('<div class="bla"></div>') 
//Returns the '#celebTree ul'. NOT jQuery object wrapping '<div class="bla"></div>'

Since you just inserted before the element and prev operates on '#celebTree ul' here, prev will take the previous element sibling, which is that content.