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                 
}

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                 
}

• javascript
• html
• jquery

Share Improve this question Follow edited Feb 17, 2021 at 10:47 robd 9,83266 gold badges4444 silver badges6161 bronze badges asked Dec 24, 2018 at 17:05 Jack MaessenJack Maessen 1,86366 gold badges2424 silver badges5656 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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./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>

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');
})

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>

Instead of using loops you can do it like this-

    let a=document.querySelectorAll("li.error > span");
    $(a).addClass('error');

Easiest way-

$("li.error > span").addClass('error');