Choose the ancestor of an element that possesses a specific class

Question

Choose the ancestor of an element that possesses a specific class

I created a navigation bar with the following structure:

<ul class="nav">
    <li class="active"><a href="blah.html">S</a></li>
    <li><a href="blah1.html">S1</a></li>
    <li><a href="blah2.html">S2</a></li>
    <li><a href="blah3.html">S3</a></li>
</ul>

During an event, I have access to the a element that the user clicked on.

$('.nav').on('click', 'li a', function(){
var clickedLink = $(this);
var prevActiveLI = ?
var currentClickedAnchorsParentLI = ?
});

I need to retrieve two things for my purpose - the previous li tag that has the active class and the li tag corresponding to the a that was just clicked. How can this be achieved?

javascript jquery html css

Answer 1

Answer №1

You can follow this method:

$('.navigation').on('click', 'list item a', function(){
    var selectedLink = $(this);
    var previousActiveItem = $('.active', $selectedLink.closest('.navigation'));
    var parentListItemOfClickedAnchor = $selectedLink.closest('list item');
});

Answer 2

You can follow this method:

$('.navigation').on('click', 'list item a', function(){
    var selectedLink = $(this);
    var previousActiveItem = $('.active', $selectedLink.closest('.navigation'));
    var parentListItemOfClickedAnchor = $selectedLink.closest('list item');
});

Answer 3

Answer №2

When a user clicks on a navigation link, the following jQuery code is executed:
  
$('.nav').on('click', 'li a', function(){
  var clickedLink = $(this);
  var prevActiveLI = clickedLink.closest('ul.nav').find('li.active');
  var currentClickedAnchorsParentLI = clickedLink.parent();
});

Answer 4

When a user clicks on a navigation link, the following jQuery code is executed:
  
$('.nav').on('click', 'li a', function(){
  var clickedLink = $(this);
  var prevActiveLI = clickedLink.closest('ul.nav').find('li.active');
  var currentClickedAnchorsParentLI = clickedLink.parent();
});

Answer 5

Answer №3

let $previousListItem,
$currentListItem
;

$('.menu').on('click', 'li a', function(){
 let clickedItem = $(this);
 if($currentListItem) {
  $previousListItem = $currentListItem;
 }
 $currentListItem = clickedItem.parent();
});

Answer 6

let $previousListItem,
$currentListItem
;

$('.menu').on('click', 'li a', function(){
 let clickedItem = $(this);
 if($currentListItem) {
  $previousListItem = $currentListItem;
 }
 $currentListItem = clickedItem.parent();
});

Answer 7

Answer №4

$('.menu').on('click', 'a.link-1', function(){
  var clickedItem = $(this);

  var parentOfClickedItem = clickedItem.parent();

  if(!parentOfClickedItem.hasClass("selected"))
    var previousSelectedItem = parentOfClickedItem.siblings(".selected").first();
  //else
    //
});

Answer 8

$('.menu').on('click', 'a.link-1', function(){
  var clickedItem = $(this);

  var parentOfClickedItem = clickedItem.parent();

  if(!parentOfClickedItem.hasClass("selected"))
    var previousSelectedItem = parentOfClickedItem.siblings(".selected").first();
  //else
    //
});

Choose the ancestor of an element that possesses a specific class

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Changing the name of a React Native sample application

AJAX Response Type in ASHX Handler

How Django manages the "multiple" tag in HTML5 handling

Vue and Axios encountered a CORS error stating that the 'Access-Control-Allow-Origin' header is missing on the requested resource

Error: Unable to establish connection to server with docker-compose due to MongoError

What happens when the loading state does not update while using an async function in an onClick event?

The image is taking up the entire div instead of just filling the area below the header

Optimal method for displaying HTML emails within a React application

Discovering the best way to organize and sort information retrieved from the backend within an Angular

Locate the element for a button or an image

Unable to activate IndexedDb persistence with Firebase v9 in a Next.js PWA

JQuery ajax DELETE request encounters issues during the OPTIONS stage

HTML is appearing as unformatted text on the screen

CSS to Vertically Display Input Values

Utilize JavaScript or Jquery programming to restrict the entry of special characters from the numeric keypad

The website no longer uses AJAX calls and does not display any errors, although it used to do so in the past

Ways to align Material-UI component side by side

Retrieving data from MongoDB and presenting it neatly in Bootstrap cards

Assigning a value to a Vuex module variable using getters from another module in Nuxt.js

Using Special Characters in React JS Applications