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"（你错过了等号）。

您的代码中也出现了逻辑错误：

if($('li').hasClass('hide'))如果文档中的任何<li>元素具有hide类，则条件将为true。
$('li').removeClass('hide').addClass('slide-down');第一个分段$('li')将实际选择文档中的所有<li>个元素，并从中删除类hide并将slide-down添加到所有文档中的<li>元素。

以下是我的表现：

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

请注意，jQuery是关于链接的，即选择子集并将函数应用于这些子集。

这一行的作用是：

$('li.hide')选择文档中包含<li>类的所有hide元素 - 这就是您的工作子集＆＃34;现在
.removeClass('hide')从我们在第一步中获得的子集中删除hide类，并再次返回相同的子集。
.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 Collection的一部分。

Answer 3

querySelectorAll和classList支持的简单javascript：

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

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

3 个答案: