Search code examples
javascriptjqueryclosest

Trouble using .closest function

I'm trying to make a sidebar menu for a dashboard. I want to implement this with .closest as it will fit with my code right. Here is a simple example of what I'm trying to do: https://jsfiddle.net/eu8kjzh4/10/

Why isn't the closest span's (and the only span in this case) text being replaced with a '-'? In my code, I have

$('.' + Key).closest( '.' + Key ).css("color", "#000");

This code works just fine, but the one in the jsfiddle does not.

Solution

  • closest traverses up the DOM and is used for nested elements.

    In your markup, your div is not a descendant of your span, not even a sibling.

    You have 1. To retrieve the previous sibling (the first li after the body) 2. And find the span inside the li

    $(document).ready(function() {
  $(".sub").prev().find('span').text('-');
});

    Also, in your fiddle, you forgot to include jQuery.

    Here is a working code : https://jsfiddle.net/qwc6pepr/1/