Using jQuery functions like closest(), find(), and children(), it is possible to target and retrieve the sibling of a specific parent

Question

Using jQuery functions like closest(), find(), and children(), it is possible to target and retrieve the sibling of a specific parent

Having trouble determining the URL of a using .closest, .find and potentially other jQuery methods. The webpage structure is as follows:

ul
 ul
  ul.good
    li
    ...
    li
    li
      <a href="/findme">findme</a>
      ul
        .
         .
          .
          ul
           li
             a <-this

There are multiple nested lists on the page. I am trying to retrieve the href value of the a tag within the li element of the ul with class "good". The issue arises when I use closest() to find ul.good, as I then struggle to isolate the specific parent li element that contains this.

In essence, how can I extract the /findme value from a<-this? Is this feasible?

Just to clarify, the a href /findme occurs at the top level within ul.good.

a<-this is located much deeper within the structure (at an unknown depth).

Appreciate your assistance.

jquery html css find parent-child

Answer 1

Answer №1

To begin, one approach is to first gather all the li elements that are children of the ul.good:

$goodUl = $this.closest('ul.good');
$lis = $goodUl.children();

Next, you can utilize these as parameters for the closest method:

$liParentOfThis = $this.closest($lis);

This will provide you with the parent $li, making it easy to then locate the a:

$a = $liParentOfThis.children('a');

While the above method is succinct, it may not be the most efficient since you are traversing up the chain twice. A potentially faster option involves using a loop:

$check = $this; 
while (($check = $check.parent().closest('ul')).length) {
  if ($check.is('.good')) break; // reached too high
  $a = $check.prev('a');
  if ($a.length) break; // found it 
}

In this iterative process, at each step, you move on to the next closest ul (as the parent is necessary for .closest search starting from the element itself) and verify if it has the desired previous sibling a. Once located, the search concludes.

Answer 2

To begin, one approach is to first gather all the li elements that are children of the ul.good:

$goodUl = $this.closest('ul.good');
$lis = $goodUl.children();

Next, you can utilize these as parameters for the closest method:

$liParentOfThis = $this.closest($lis);

This will provide you with the parent $li, making it easy to then locate the a:

$a = $liParentOfThis.children('a');

While the above method is succinct, it may not be the most efficient since you are traversing up the chain twice. A potentially faster option involves using a loop:

$check = $this; 
while (($check = $check.parent().closest('ul')).length) {
  if ($check.is('.good')) break; // reached too high
  $a = $check.prev('a');
  if ($a.length) break; // found it 
}

In this iterative process, at each step, you move on to the next closest ul (as the parent is necessary for .closest search starting from the element itself) and verify if it has the desired previous sibling a. Once located, the search concludes.

Answer 3

Answer №2

Here's a quick and easy solution that should do the trick for you:

$("#here").on("click",function(){
   alert($(this).parents("ul.good").find("> li > a").attr("href"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <ul>
    <ul class="good">
      <li>something</li>
      <li>something</li>
      <li>
        <a href="/findme">findme</a>
      </li>
    <ul>
    <ul>
      <li>
        <a href="#" id="here">I am here</a>
      </li>
      </ul>
      </ul>
    </ul>
  </ul>
</ul>

Answer 4

Here's a quick and easy solution that should do the trick for you:

$("#here").on("click",function(){
   alert($(this).parents("ul.good").find("> li > a").attr("href"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <ul>
    <ul class="good">
      <li>something</li>
      <li>something</li>
      <li>
        <a href="/findme">findme</a>
      </li>
    <ul>
    <ul>
      <li>
        <a href="#" id="here">I am here</a>
      </li>
      </ul>
      </ul>
    </ul>
  </ul>
</ul>

Using jQuery functions like closest(), find(), and children(), it is possible to target and retrieve the sibling of a specific parent

Answer №1

Answer №2

Similar questions

Angular 17 | Angular Material 17.3.1: Problem encountered with Angular Material form field focus and blur event handling

What is the best way to include a JavaScript variable within CSS styling?

Various background positions

Adapting Bootstrap components based on the screen size: Viewport-driven

The appearance of online and local websites varies on a single screen and browser

What is the best way to retrieve the input value from post.ejs?

Creating Your Own Custom Select with DataTables

Display a popover by making an Ajax request

Container contents are spilling out of control after adjusting container height to auto

Pattern to filter out numeric values from a collection

Mastering Tooltip Placement Using CSS or JavaScript

Catching exceptions with jQuery Ajax

Horizontal rule spans the full width of the content, appearing within an ordered list

PHP Implementing real-time dynamic categories

Chosen option from the Bootstrap drop-down menu

Using jQuery to dynamically add one of two fields to a form

Failure to successfully transmit data from Ajax to PHP script

Calculate averages of an array and show them when the page loads using Vue

To see website changes, refreshing with Ctrl + F5 is necessary in the browser

Using the JQuery Library, you can implement two submit buttons that either open in a new tab or submit