将类添加到具有特定类的元素中

Question

我正在寻找一种方法将某个类添加到某个元素与另一个类。

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li class="hide">Item 4</li> 
    <li class="hide">Item 5</li> 
<ul> 

JS/Jquery的

if($('li').hasClass('hide')) { 
    $('li').removeClass('hide').addClass('slide-down'); 
} 

的问题是，类slide-down被添加到所有li元素。

有没有办法只针对li元素的hide类被删除？

Answer 1

也许这是由于HTML中的错字：class"hide"（您错过了等号）。

你也有你的代码中的逻辑错误：

1. if($('li').hasClass('hide'))如果你的文档中的任何<li>元素具有hide类的条件将产生真实的。
2. $('li').removeClass('hide').addClass('slide-down');第一段$('li')居然会选择文档中的所有元素<li>并从中取出类hide和您的文档中添加slide-down为ALL <li>元素。

以下是我会做：

$('li.hide').removeClass('hide').addClass('slide-down'); 

注意，jQuery是有关链接，即选择子集和应用功能，这些子集。

什么这行代码：

1. $('li.hide')选择文档中的所有元素<li>这些都是hide类 - 这becomse现在你的“工作集”。
2. .removeClass('hide')从我们在第一步获得的子集中移除hide类，并再次返回相同的子集。
3. .addClass('slide-down')添加slide-down类在从第2步中返回的选择的子集，这是相同的步骤从所有<li> 1.

JS拨弄：https://jsfiddle.net/q0nzaa7t/

Answer 2

在香草JS：

var liHide = document.querySelectorAll('li.hide'); 
var i; 
var length = liHide.length; 

for (i=0;i<length;i++) { 
    liHide[i].className = 'slide-down'; 
} 

请注意，由于某种原因，querySelectorAll不会自动更新，如document.getElementsByClassName。如果我们会用这个方法来查询DOM同样的代码是行不通的：

var liHide = document.getElementsByClassName('hide'); 
var i; 
var length = liHide.length; 

for (i=0;i<length;i++) { 
    liHide[i].className = 'slide-down'; //<-- this won't update the 2nd element 
} 

这将只有改变的第一要素，因为liHide[1]变得liHide[0]，因为<li class="hide">Item 4</li>是HTML收藏不再一部分。

Answer 3

普通的JavaScript与querySelectorAll的那些和classList支持：

var items = document.querySelectorAll('li.hide'); 
for (var i = 0; i < items.length; i++) { 
    items[i].classList.remove('hide'); 
    items[i].classList.add('slide-down'); 
} 

没有querySelectorAll：

var items = document.getElementsByTagName('li'); 
for (var i = 0; i < items.length; i++) { 
    if (items[i].classList.contains('hide')) { 
     items[i].classList.remove('hide'); 
     items[i].classList.add('slide-down'); 
    } 
} 

没有querySelectorAll和classList：

var items = document.getElementsByTagName('li'); 
for (var i = 0; i < items.length; i++) { 
    if (new RegExp(/(?:^|\s)hide(?!\S)/g).test(items[i].className)) { 
     items[i].className = items[i].className.replace(/(?:^|\s)hide(?!\S)/g , ''); 
     items[i].className += ' ' + 'slide-down'; 
    } 
}