JQuery Basics - Understanding the insight -5

We will use following html to understand the concepts -

<div class="root">
    <div id="child1" class="div1">
        <span>
        <p class="para">Hi this is 1st para.</p>
        <p class="para">Hi this is 2nd para.</p>
        <p class="para">Hi this is 3rd para.</p>
            </span>
    </div>
    <div id="child2" class="div2">
        <p class="para" id="child2Para1">This is another paragraph1 .</p>
        <p class="para" id="child2Para2">This is another paragraph2 .</p>
        <p class="para" id="child2Para3">This is another paragraph3 .</p>
    </div>
</div>


next() - get the next sibling of matching selector. It helps us to traverse on the same level in the DOM.
Example -$('#child1 .para').next().css("color","blue");
It will apply new css on 2 paragraphs under child1 div.
What if there is no next element available? In that case it returns an empty object, we can always use length property to check if we have any elements available.
We can always use a selector in next() method to select a specific element like this -
$('#child2 .para').next('#child2Para3').css("color","blue");

We also have nextAll() method available which does the similar job for us, but the difference is, next() returns immediate next sibling, whereas nextAll() returns all the siblings. Example -
 $('#child2Para1').next() -- will return you a single object
 $('#child2Para1').nextAll() -- will return you 2 objects.

NOTE - In the above case also $('#child1 .para') itself returns us 3 objects, thus we get 2 objects if we apply next() method on it.

prev() -
It helps us to select the previous sibling of an element. It can be understood as opposite of next, int terms of selected element.
Example -$('#child2Para2').prev().css("color","blue");
it will select element before "child2para2" that is "child2para1".

parent()-
Get the parent of current element in the DOM tree. IT will return immediate parent only. Example -
$('#child2Para1').parent().css("background-color","blue");
It will help us to select the parent of "child2para1", that is div with id "child2" and will set its backgrounf to blue.
What if we want to move higher in the DOM tree, instead of sticking to the immediate parent.
Well for this jquery provides another method "parents()". it returns all the parent object of the current element.
If we use -$('#child2Para1').parents(), then it will return 2 div elements as its parent, 1) child2 and 2) root. It will also return body and html element as its parent. We can pass any selector to parents([selector]) to choose specific parent in the hierarchy.

children()-
Get the child element of current element. We can pass a selector to choose specific child as well. It will return only immediate children, not the descendant ones.
example - $('#child2').children() -  will return 3 elements
$('.root').children() -  will return 2 elements
What if we want to get descendant children as well(along with immediate children)?
Well, we can use find() method which does the similar job for us.
$('.root').find('*') - it will return all the child elements.

closest()-
takes the selector(or element or jquery object) as input and checks the current element or its parent to find the match. It is similar to parent but here are few differences between closest and parent method -
closest start search from current element, whereas parent start search from parent element.
closest return 0 or 1 result whereas parents can return 0 or many results.
closest climb up in the DOM tree, and check for the match, whereas , parents traverse the whole tree first and then filter out the matching results.

siblings()-
get the siblings of given element. Ex.  $('#child2Para2').siblings() returns 3 sibling for given element.