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

"Trouble arises when dealing with nested object arrays in Formik and handling changes in a child

When running `npm install`, it attempts to install version 1.20.0 of grpc even though version 1.24.2 is specified in

Tips for extracting particular information from a website and displaying it within my application

What is the best way to retrieve a particular div element from a webpage?

The functions Show() and Hide() may not work in all scenarios within jQuery

Invoking a function to display text when a selection is changed

What is the best way to transform this unfamiliar CSS element into JavaScript code?

Utilize MySQL to populate highcharts with data

Changing from Basic to JavaScript?

Adjusting the height of a card in Reactstrap

Checkbox Event Restricts Access to a Single Class Variable

Grid layout with columns of equal width in Bootstrap

Can you provide tips on leveraging CSS as a prop for a Vuetify v-tab component?

Interacting with my Rails API through JavaScript requests

minimize the size of the indigenous foundation input field

Modify picture properties when listbox is altered using jQuery

Exploring the dynamic data loading feature in Vue 3 by fetching data from the server and displaying it using a v-for

Utilizing AJAX in Tables: Implementing an Onclick Function in a Button within a Table to Access JSON Data

VueJS: Unable to access the 'name' property as it is undefined"

What is the best way to augment an AJAX array response with additional data?