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

Exploring the concept of nested views in AngularJS's UI Router with multiple views integration

How to send cross-domain AJAX requests to RESTful web services using jQuery?

What is the reason that certain functionalities do not work on an element that has two CSS classes assigned to it

Having difficulties with Smooth Div Scroll and Colorbox integration

Learn how to access an array within an object using JavaScript and an API URL

Fascinating CSS rendering glitch observed on zooming in: all browsers create a noticeable gap between containers except for Firefox

What is the best way to selectively print the contents of a child window upon page load?

Reduce the transparency of the overlay picture

Changing the identification of elements

Stop the time-dependent function from executing within a specific condition

Incorporating Node.JS variables within an HTML document

TypeScript code runs smoothly on local environment, however encounters issues when deployed to production

Repeated Hover Effects on CSS Menu Icons

Show information from table B following the selection made in table A

How to move content without affecting the background of the `<body>` using scrolling

Dynamically adjusting CSS Max-Height according to scroll position

Is it possible to forecast an on click event using jQuery?

Pop-up with a unique MediaBox design

The custom styling in custom.css is not taking precedence over the styles defined in

Show the components only if the final digit in their identification number is less than i