Using jQuery to extract the value of an object from an <li> element and updating the class attribute of the <li> element

Question

Using jQuery to extract the value of an object from an <li> element and updating the class attribute of the <li> element

There is a div element:

<div id="ddDistr" class="searchBoxSortDistrict" tabindex="1">
  <ul id="ddd">
  </ul>
</div>

I have inserted HTML from json into it:

$("#ddd").html(" "), $.each(dis, function(
  index, value) {
    $("#ddd").append( "<li><a style=\"cursor: pointer;\">"
    + value.fieldName + "("
    + value.count + ")</a></li>");
   }
);

I am trying to change the class of onclick <li> to .active.

$('#ddDistr li > a').click(function() {
  console.log('dd');
  $(this).siblings('li').removeClass('active');
  $(this).addClass('active');
});

However, this code is not working. Can you help me identify the issue?

Furthermore, I want to retrieve value.fieldName from the active <li> element and send it via POST.

How can I achieve this? Any suggestions?

javascript jquery html css

Answer 1

Answer №1

When using a click event for an anchor element, keep in mind that $(this).siblings('li') won't work as expected since `li` elements are not siblings of the anchor. Instead, you should use something like

$(this).closest('li').siblings('')

.

Update: To attach events to dynamically generated elements, you will also need to use event delegation.

To add a class to the parent `li` of a clicked anchor:

$('#ddDistr').on('click', 'li > a',function() {
    console.log('dd');
    $(this).closest('li').siblings().removeClass('active');
    $(this).closest('li').addClass('active');
});

To add a class to the clicked anchor tag:

$('#ddDistr').on('click', 'li > a',function() {
  console.log('dd');
  $(this).closest('li').siblings().find('a').removeClass('active');
  $(this).addClass('active');
});

Answer 2

When using a click event for an anchor element, keep in mind that $(this).siblings('li') won't work as expected since `li` elements are not siblings of the anchor. Instead, you should use something like

$(this).closest('li').siblings('')

.

Update: To attach events to dynamically generated elements, you will also need to use event delegation.

To add a class to the parent `li` of a clicked anchor:

$('#ddDistr').on('click', 'li > a',function() {
    console.log('dd');
    $(this).closest('li').siblings().removeClass('active');
    $(this).closest('li').addClass('active');
});

To add a class to the clicked anchor tag:

$('#ddDistr').on('click', 'li > a',function() {
  console.log('dd');
  $(this).closest('li').siblings().find('a').removeClass('active');
  $(this).addClass('active');
});

Answer 3

Answer №2

ul is not a relative of span, it's actually its child.

This fact becomes evident when you observe ul > span.

To resolve this issue, simply update your code to utilize child():

$(this).child().toggleClass('highlighted');

You can also attach the click function directly to the specific ul element.

Furthermore, per the advice of user1234, learn more about utilizing .on() and event delegation. If you define the click function before creating your HTML elements, it may fail as the function will only be applied to pre-existing content. This emphasizes the importance of delegating events to a pre-existing container for effective functionality.

Answer 4

ul is not a relative of span, it's actually its child.

This fact becomes evident when you observe ul > span.

To resolve this issue, simply update your code to utilize child():

$(this).child().toggleClass('highlighted');

You can also attach the click function directly to the specific ul element.

Furthermore, per the advice of user1234, learn more about utilizing .on() and event delegation. If you define the click function before creating your HTML elements, it may fail as the function will only be applied to pre-existing content. This emphasizes the importance of delegating events to a pre-existing container for effective functionality.

Using jQuery to extract the value of an object from an <li> element and updating the class attribute of the <li> element

Answer №1

Answer №2

Similar questions

Tips for achieving jQuery form submission with Ajax functionality

Having trouble rendering an HTML webpage using Flask's RESTful API? Your webpage might be displaying improperly

Ways to center-align this menu (Spanish language)

Getting the AJAX response back to the main page

Creating a Pop-Up on Website Load with HTML, CSS, and Jquery

Executing an external Python script within a Vue application's terminal locally

Steps for modifying the CSS class of an <a> tag with Jquery/Javascript

Creating Bubble Charts using npm highcharts with error code #17

Converting rotation into a directional vector

Why does my jQuery code target all the text values?

Tips for Printing a div Element with Horizontal Scrollbars

Changing the container's height in an HTML document

Unable to use saved images with jQuery Slider

Conflict between jQuery and dynamically changing page content

Unable to establish connection between Router.post and AJAX

Disable location prompt feature when using AngularJS with Maps API

Detecting the clicked link within a React component

Enhance jQuery with additional features using Bootstrap

As the cursor moves, the image follows along and rotates in sync with its

Creating a customized component using unique styles in Material UI version 1