How to add a class to a span element which is part of an existing <li> tag with jQuery

by

How can I add a class to a span element for only these spans which are part of li tags with class='error'
per example, this is the HTML which is generated:

<li class="error">
  <!--if list has class error, then add also class error to span which is part of that list tag-->
  <span class="error"></span>
</li>

This is the code I have so far:

if(status == 'error') {
  data.context.addClass('error'); // adds class error to li tag                 
}

5 thoughts on “How to add a class to a span element which is part of an existing <li> tag with jQuery”

  1. For a pure vanilla JavaScript solution, you can use an attribute selector to find all your li elements that have a class called error. Once you have that list of li elements, just loop thru (using forEach or a for-loop) and append an a span element as a child of the li. The span element should also be given a class attribute called “error” via setAttribute.

    function appendErrorSpan(li) {
  var errorEl = document.createElement('span');
  errorEl.setAttribute('class', 'error');
  errorEl.appendChild(document.createTextNode('Error span added!'));
  li.appendChild(errorEl);
};

var errorListItems = document.querySelectorAll('li[class="error"]');

errorListItems.forEach(appendErrorSpan);
    <li class="">
  <span></span>
</li>
<li class="error">
</li>
    Reply

  2. This should achieve the expected result. Iterate through all li elements with the error class and find any spans, then add the class error to it. 

    $('li.error').each(function() {
    $(this).find('span').addClass('error');
})
    Reply

  4. This is easy using JQuery, just select all li items that have the class .error and then use find() to find all the spam elements inside it, finally add the class .error to those:

    $(document).ready(function()
{
    $("li.error").find("span").addClass("error");
});
    span.error {
    background-color: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="">
    <span>Parent "li" do not have class error</span>
</li>
<li class="error">
    <span>Parent "li" have class error</span>
</li>
    Reply

Leave a Comment