Holla Tech - Learn

DOM Traversal
 

jQuery has many useful methods for DOM traversal.
The parent() method returns the direct parent element of the selected element. For example:
HTML

<div> div element
  <p>paragraph</p>
</div> 

 

JS: 

var e = $(“p”).parent();
e.css(“border”, “2px solid red”);

 

The code above selects the parent element of the paragraph and sets a red border for it.

NOTE!
Run the code to see it in action.

DOM Traversal
 

The parent() method can only traverse a single level up the DOM tree.
To get all ancestors of the selected element you can use the parents() method. For example:
HTML:

<body>  body
  <div style=width:300px;> div
    <ul> ul
      <li> li
        <p>paragraph</p>
      </li>
    </ul>  
  </div>
</body> 

 

JS: 

 

$(function() {
  var e = $(“p”).parents();
  e.css(“border”, “2px solid red”);
});

 

Holla Tech - Learn jQuery


DOM Traversal
 

The eq() method can be used to select a specific element from multiple selected elements.
For example, if the page contains multiple div elements and we want to select the third one:

$(“div”).eq(2); 

 

NOTE!
The index numbers start at 0, so the first element will have the index number 0.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE jQUERY MAIN COURSE PAGE. 

jQUERY MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT