-->

Part 11 - JQuery Traversing - #Child Element Traversal | children and find methods




Jquery Traversing?
In this tutorial will discuss about  jquery traversal specially, Child Element Traversal.  Traversing means to reach to the particular element present in DOM Tree

Parent  Element Traversal
  1. parent(): It returns the direct parent element of the selected element.
  2. parents(): It returns all ancestor elements of the selected element.
  3. parentsUntil(): It returns all ancestor elements between two given arguments.

Child Element Traversal
  1. children(): It returns all direct children of the selected element.
  2. find(): It returns descendant elements of the selected element.

Sibling  Element Traversal 
  1. siblings() : It returns all sibling elements of the selected element 
  2. next() : It returns the next sibling element of the selected element.
  3. nextAll(): It returns all next sibling elements of the selected element
  4. nextUntil(): It returns all next sibling elements between two given arguments
  5. prev: It returns the previous sibling element of the selected element
  6. prevAll(): It returns all previous sibling elements of the selected element
  7. prevUntil(): It returns all previous sibling elements between two given arguments



# Example
Replace your html code with below code 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<style>
.ancestor * {
display: block;
padding: 10px;
margin: 10px;
border: 2px solid gray;
}
</style>

<script>



$(document).ready(function () {


//children
//$(".ancestor").children("div").css({ "border": "2px solid red" })

//find
$(".ancestor").find(".para1").css({ "border": "2px solid red" })


})
</script>


</head>
<body>

<div class="ancestor">
Ancestor

<div class="div1">
direct child of ancester
<ul>
Grand child #ul
<li>
great grand child #li
<span>Child</span>
</li>
</ul>

</div>


</div>

<div class="ancestor">
<p>Paragraph1</p>
<p>Paragraph1</p>
<p class="para1">Paragraph1</p>
<span>Span1</span>
</div>

</body>
</html>

0 Response to "Part 11 - JQuery Traversing - #Child Element Traversal | children and find methods"

Post a Comment

Popular posts

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel