Question

In jQuery, let’s say we have 2 ways to navigate through the DOM elements;

1. Through the use of CSS colon selectors (e.g. var x = $("#someElement:after"))
2. Through the jQuery functions (e.g. var x = $("#someElement").prev())

Now my questions are:

1. Is the return type same in both the cases?
2. What is the difference in navigating through the DOM in both the
   approaches?
3. Can we apply the same jQuery function to the result of both these
   statements? E.g. x.css("someProp","someVal")

Answer 1

I’m not sure that “:after” exists but other than that:

1) The return type will be exactly the same for either (So long as its a valid selector)

2) The difference is fairly slight, its mostly about how you prefer do to things and in certain cases the “:first” may not be exactly what you want, in a loop for example. There are arguments about which has the best overhead but I don’t know enough to comment.

3) Absolutely, as the return type is exactly the same (A jQuery element) you can use them in exactly the same way.

E.G:
$(“#Test”).parent();
would return exactly the same as
$(“#Test:parent”);

Example:
http://jsfiddle.net/HenryGarle/2qcpK/

<div id="Parent1">
    <div id="Test1">Text</div>
</div>

<div id="Parent2">
    <div id="Test2">Text</div>
</div>


// replaces the content of Test1's parent
$("#Test1").parent().html("New Parent 1 content");

// replaces the content of Test2's parent
$("#Test2:parent").html("New Parent 2 content");

This would result in the DOM looking like:

<div id="Parent1">
    New Parent 1 content
</div>

<div id="Parent2">
    New Parent 2 content
</div>