add id attribute in jquery

To add an id attribute to a specific child element using jQuery, you can use the eq() method to target the child by its index or a more specific selector, then apply the .attr() method to set the id attribute.
Here are a couple of examples:

1: Using eq() to target a specific child by index

$('parentSelector').children().eq(index).attr('id', 'yourId');
This will add an id attribute to the child element at the specified index. Replace parentSelector with the selector for the parent element, index with the zero-based index of the child element, and ‘yourId’ with the desired id.

2: Using a specific child selector

If you want to target a specific child element based on its tag or class, you can combine selectors:
$('parentSelector').find('childSelector').attr('id', 'yourId');
Replace parentSelector and childSelector with the appropriate selectors for the parent and child elements.

Example:

Add an id to the second li element in an unordered list:
$(document).ready(function() {
    $('.elementor-icon-list-items').children('li.elementor-icon-list-item').eq(3).attr('id', 'book');
});

  • Index Issue: jQuery .eq() uses zero-based indexing, so .eq(3) targets the 4th li element, not the 3rd one. Make sure that you’re selecting the right index.
  • Timing Issue: If you’re running the jQuery code before the DOM has fully loaded, the target elements may not exist yet, causing the selector to fail. Make sure the code runs after the DOM is ready.
  • Selector Specificity: Ensure that the element you’re targeting exists and that the .elementor-icon-list-items container and its children are correctly selected.

Confirm that there are enough children elements:

Ensure there are at least 4 li elements with the class .elementor-icon-list-item. If there are fewer, .eq(3) will not select anything.