Similiar JQuery Selector and Traversers

Similar but Different JQuery Selectors

While working with JQuery, there could be some selectors and manipulation methods which seems having same functionality but they are also having some difference which I described below:

1.    1. $(“div”).children() and $(“div > p”)

             Similarity:

Both select children of paragraph <p>.

Difference:

$(“div”).children(“p”) selects only first level elements of type <p> while $(“div > p”)  selects all paragraphs including first level and sub levels.

$(“div”).children() can be used to select multiple types of child elements unlike $(“div > p”). e.g. $(“div”).children(“p, span, div”).

2.     2. $(“div”).children() and $(“div”).contents()

Similarity: 

Both select children of specified element.

Difference:

.children() selects element nodes only but .contents() also selects text nodes written inside elements.

3.     3. :eq and .eq()

             Similarity:

             Both selects the elements placed at specified index value.

 Difference:

.eq() accepts negative value while :eq() does not. Providing negative value say -1 to .eq() selects the last element.

4.     4. .closest() and .parents()

Similarity:

Both traverse up to the DOM tree.

Difference:

.closest() travels up to the tree until it finds the matched element while .parents() travels up to the root element.

.closest() return zero or one element. While .parents() returns zero, one or more than one elements.

 

5.     5. .find() and .filter()

Similarity:

Both refine the selection of selected elements.

Difference:

.find() selects the descendents of selected elements while .filter() further refine the selection of selected elements in the result by means of applied JQuery selector expression or callback functions.

6.     6. .find() and .children()

             Similarity:

             Both refine the selection of their child elements.

             Difference:

            .find() travels up to all level down while .children() travels only one level down.

7.     7. .parent() and .parents()

Similarity:

Both search for its parent elements.

Difference:

.parent() travels only single level up the DOM tree while .parents() travels up to the root of DOM tree.

 


 

 

 

                                   

 

 

Next Recommended Reading jQuery Selectors