如何將類添加到作為現有的一部分的 span 元素<li>用 jQuery 標記

Question

我如何才能為這些span元素添加一個類，這些span是每個示例中帶有class='error'的li標簽的一部分，這是生成的 HTML：

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

這是我到目前為止的代碼：

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

Answer 1

這很容易使用JQuery ，只需選擇具有類.error所有li項目，然后使用find()查找其中的所有spam元素，最后將類.error添加到那些：

 $(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>

Answer 2

這應該達到預期的結果。 使用error類遍歷所有 li 元素並找到任何跨度，然后將類error添加到其中。

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

Answer 3

對於純原生 JavaScript 解決方案，您可以使用屬性選擇器來查找所有具有名為error的類的li元素。 獲得li元素列表后，只需循環（使用forEach或 for 循環）並附加一個span元素作為li的子元素。 還應該通過setAttribute span 元素賦予一個名為“error”的類屬性。

 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>

Answer 4

而不是使用循環，你可以這樣做 -

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

Answer 5

最簡單的方法——

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