[英]Adding a class to an element with a specific class
I'm looking for a way to add a class to a certain element with another class. 我正在寻找一种将类添加到具有另一个类的特定元素的方法。
<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 JS / jQuery的
if($('li').hasClass('hide')) {
$('li').removeClass('hide').addClass('slide-down');
}
The problem is that the class slide-down
gets added to all li
elements. 问题在于该类
slide-down
添加到所有li
元素中。
Is there a way to only target the li
elements that have the hide
class removed? 有没有办法只针对已移除
hide
类的li
元素?
Mh maybe it's due to the typo in your HTML: class"hide"
(you are missing the equal sign). 嗯,可能是由于HTML中的错字:
class"hide"
(您缺少等号)。
Also you got a logical error in your code: 另外,您的代码中存在逻辑错误:
if($('li').hasClass('hide'))
the condition will yield true if any <li>
element in your document has the hide
class. if($('li').hasClass('hide'))
如果文档中的任何<li>
元素具有hide
类,则条件将为true。 $('li').removeClass('hide').addClass('slide-down');
the first segment $('li')
will actually select ALL <li>
elements in your document and remove the class hide
from them and add the slide-down
to ALL <li>
elements in your document. $('li')
实际上将选择文档中的所有<li>
元素,并从中删除类hide
,并将slide-down
添加到文档中的所有<li>
元素。 Here's how I'd do it: 这是我的处理方式:
$('li.hide').removeClass('hide').addClass('slide-down');
Note that jQuery is about chaining, ie selecting subsets and applying functions to these subsets. 请注意,jQuery是关于链接的,即选择子集并将函数应用于这些子集。
What this line does is: 该行的作用是:
$('li.hide')
selects all <li>
elements in your document which have the hide
class - this becomse your "working subset" now. $('li.hide')
选择文档中所有具有hide
类的<li>
元素-现在成为“工作子集”。 .removeClass('hide')
removes the hide
class from this subset we got in the first step and returns the same subset again. .removeClass('hide')
从第一步中获得的hide
子集中删除hide
类,然后再次返回同一子集。 .addClass('slide-down')
adds the slide-down
class to all <li>
in the selected subset returned from step 2, which is the same as from step 1. .addClass('slide-down')
将slide-down
类添加到步骤2返回的所选子集中的所有<li>
中,该子集中与步骤1相同。 JS fiddle: https://jsfiddle.net/q0nzaa7t/ JS小提琴: https : //jsfiddle.net/q0nzaa7t/
In vanilla JS: 在香草JS中:
var liHide = document.querySelectorAll('li.hide');
var i;
var length = liHide.length;
for (i=0;i<length;i++) {
liHide[i].className = 'slide-down';
}
Note that, for some reason, querySelectorAll
doesn't get updated automatically like document.getElementsByClassName
. 请注意,由于某种原因,
querySelectorAll
不会像document.getElementsByClassName
这样自动更新。 The same code wouldn't work if we would have used that method for querying the DOM: 如果我们使用该方法查询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
}
This would have only changed the first element, since liHide[1]
becomes liHide[0]
, because <li class="hide">Item 4</li>
is no longer part of HTML Collection. 因为
liHide[1]
变成liHide[0]
,所以这只会更改第一个元素,因为<li class="hide">Item 4</li>
不再是HTML集合的一部分。
Plain javascript for the ones with querySelectorAll
and classList
support: 支持
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');
}
Without querySelectorAll
: 没有
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');
}
}
Without querySelectorAll
and classList
: 没有
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';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.