jQuery Traversing

1. parent(), parents(), children()

These methods help in navigating the DOM tree upward and downward.


<div id="container">
  <div class="box">
    <p>This is a paragraph.</p>
  </div>
</div>

<button id="show-parent">Show Parent Tag</button>

This is a paragraph.

2. next(), prev(), siblings(), closest()

These are used to find adjacent or related elements in the DOM.


<ul>
  <li class="item">Item 1</li>
  <li class="item selected">Item 2</li>
  <li class="item">Item 3</li>
</ul>

<button id="next-item">Highlight Next Item</button>
  • Item 1
  • Item 2
  • Item 3

3. find(), filter(), not()

These are used for searching elements inside other elements or filtering selections.


<div id="wrap">
  <p class="target">Para 1</p>
  <p>Para 2</p>
  <p class="target">Para 3</p>
</div>

<button id="highlight-targets">Highlight Targets</button>

Para 1

Para 2

Para 3

If you have any questions, feel free to ask. Thank you for reading!

Thankyou!