JQuery does not have the capability to target neighboring elements

Question

JQuery does not have the capability to target neighboring elements

How can I get a user to click on a tag that is inside an li element (div ul li a)? By default, the first a tag has a class of 'on'. When the tag is clicked, the code should add the class 'on' to the clicked element and remove it from all other siblings. However, the removal of the class from siblings is not working as expected.

var menu01_list = $(".profile_menu01 ul li > a");

menu01_list.click(function(){
  $(this).siblings().removeClass('on');
  $(this).addClass('on');
});

Here is the HTML code:

<div class="profile_menu01">
    <ul>
        <li><a class="btn_my_pick on" href="#">My Pick</a></li>
        <li><a class="btn_my_pickpot" href="#">3<span class="alert_num"></span>My Picpot</a></li>
        <li><a class="btn_my_review" href="#">My ReView</a></li>
        <li><a class="btn_my_photos" href="#">My Photos</a></li>
    </ul>
</div>

jquery html css

Answer 1

Answer №1

When you are examining the siblings of the <a> element within the context of the <li>, there actually are no direct siblings at that level. In order to find siblings, you need to traverse one level up to the <li> and then back down again:

menu01_list.click(function(){
   $(this).parent().siblings().children().removeClass('on');
   $(this).addClass('on');
});

An alternative approach is to run the function on the li itself:

var menu01_list = $(".profile_menu01 ul li");

menu01_list.click(function(){
   $(this).siblings().children().removeClass('on');
   $(this).children().addClass('on');
});

Answer 2

When you are examining the siblings of the <a> element within the context of the <li>, there actually are no direct siblings at that level. In order to find siblings, you need to traverse one level up to the <li> and then back down again:

menu01_list.click(function(){
   $(this).parent().siblings().children().removeClass('on');
   $(this).addClass('on');
});

An alternative approach is to run the function on the li itself:

var menu01_list = $(".profile_menu01 ul li");

menu01_list.click(function(){
   $(this).siblings().children().removeClass('on');
   $(this).children().addClass('on');
});

Answer 3

Answer №2

Based on the code you provided (.profile_menu01 ul li > a), it seems that there is no immediate sibling for the a tag. You can utilize the code snippets below to remove the on class.

$(this).closest("ul").find("a.on").removeClass("on")

For example:

 var menu01_list = $(".profile_menu01 ul li > a");

 menu01_list.click(function() {
   $(this).closest("ul").find("a.on").removeClass('on');
   $(this).addClass('on');
 });

.on{
  background:Yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_menu01">
  <ul>
    <li><a class="btn_my_pick on" href="#">My Pick</a></li>
    <li><a class="btn_my_pickpot on" href="#">3<span class="alert_num"></span>My Picpot</a></li>
    <li><a class="btn_my_review on" href="#">My ReView</a></li>
    <li><a class="btn_my_photos on" href="#">My Photos</a></li>
  </ul>
</div>

Answer 4

Based on the code you provided (.profile_menu01 ul li > a), it seems that there is no immediate sibling for the a tag. You can utilize the code snippets below to remove the on class.

$(this).closest("ul").find("a.on").removeClass("on")

For example:

 var menu01_list = $(".profile_menu01 ul li > a");

 menu01_list.click(function() {
   $(this).closest("ul").find("a.on").removeClass('on');
   $(this).addClass('on');
 });

.on{
  background:Yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_menu01">
  <ul>
    <li><a class="btn_my_pick on" href="#">My Pick</a></li>
    <li><a class="btn_my_pickpot on" href="#">3<span class="alert_num"></span>My Picpot</a></li>
    <li><a class="btn_my_review on" href="#">My ReView</a></li>
    <li><a class="btn_my_photos on" href="#">My Photos</a></li>
  </ul>
</div>

Answer 5

Answer №3

There is a minor error in the script below:

var menu01_list = $(".profile_menu01 ul li > a");

    menu01_list.click(function(){
       $(this).siblings().removeClass('on');
       $(this).addClass('on');
    });

In the code above, you are attempting to remove classes from the <a> anchor tag which is not a sibling element as these anchor tags are separated by the parent element <li>.

To resolve this issue, try using the following script:

var menu01_list = $(".profile_menu01 ul li > a");

    menu01_list.click(function(){
       $(this).parent().siblings().children('a').removeClass('on');
       $(this).addClass('on');
    });

Answer 6

There is a minor error in the script below:

var menu01_list = $(".profile_menu01 ul li > a");

    menu01_list.click(function(){
       $(this).siblings().removeClass('on');
       $(this).addClass('on');
    });

In the code above, you are attempting to remove classes from the <a> anchor tag which is not a sibling element as these anchor tags are separated by the parent element <li>.

To resolve this issue, try using the following script:

var menu01_list = $(".profile_menu01 ul li > a");

    menu01_list.click(function(){
       $(this).parent().siblings().children('a').removeClass('on');
       $(this).addClass('on');
    });

Answer 7

Answer №4

let menuItems = $(".profile_menu01 ul li > a");

    menuItems.click(function(){
       $(this).parent().siblings().children('a').removeClass('active');
       $(this).addClass('active');
    });

Answer 8

let menuItems = $(".profile_menu01 ul li > a");

    menuItems.click(function(){
       $(this).parent().siblings().children('a').removeClass('active');
       $(this).addClass('active');
    });

JQuery does not have the capability to target neighboring elements

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to seamlessly transition from responsive design to mobile design?

Creating an arrow line with CSS styling can be achieved easily

conceal the android keyboard when focusing

Designate the preferred location for requesting the desktop site

Xpath attribute of Selenium element

How to Properly Wrap Sub-Menu Elements in WordPress with Div Tags

Retrieve the current value of an item by scrolling through it

Exploring the Spotify API with jQuery/ajax to fetch details about songs, artists, and albums

Looking to extract the hidden value from an HTML input field using Selenium

The issue of Markdown not being recognized inside nested divs

What is the maximum number of files that FileUploader can accept when multi-select is enabled?

Launching a webpage programmatically

Accessing the Bootstrap tab form from an external source

Transition effect does not work properly when using ng-hide

"Customize your Vuetify v-card with uniquely styled rounded corners on only

Guide on extracting the date selected from a Bootstrap datepicker and displaying it in a separate div

Adjust transparency according to the information extracted from the AnalyserNode

The method of displaying milliseconds in a JavaScript countdown timer

AngularJS function orderBy reverses the array instead of sorting it

How can you display two images by hovering your mouse over them?