將類添加到具有特定類的元素中

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