Using jQuery to Find Elements in the DOM object

Sep 22
2011

Written By psmith

Leave a Comment

This article describes how you can use jQuery to select specific elements from the DOM object. With that being said lets jump right into it.

.parent() Method
We will start with the .parent() method. The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.

.parent() - this will allow you to select the current focused element's direct parent.
Example:
<div id="Paul">
<div id="Bill"></div>
</div>

In this case the direct parent of the div "Bill" is "Paul". If you would like to select that particular div and change its backgroung color to yellow you can use the following syntax:
$("#Bill").parent("#Paul").css("background", "yellow");

.find() Method
The exact opposite of the parent method would be the find method which looks at the children of the current focused element instead of the parent. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree

Example:
<div id="Paul">
<div id="Bill"></div>
</div>

In this case the direct child of the div "Paul" is "Bill". If you would like to select that particular div and change its backgroung color to red you can use the following syntax:
$("#Paul").children("#Bill").css("background", "red");

Posted in Jquery
Tagged Jquery