从 JavaScript 中的多个元素中删除一个类
[英]Removing a class from multiple elements in JavaScript
问题描述
I want to be able to remove a class from x amount of elements.
我希望能够从 x 个元素中删除一个类。 The elements that I am currently using is a tags.我当前使用的元素是标签。 There can be unlimited amount of a tags on the document at any given time because in a different div an user can create links.在任何给定时间，文档上都可以有无限数量的标签，因为用户可以在不同的 div 中创建链接。 This prevents me from using specific ids.这使我无法使用特定的 ID。 But I want to only have one tag highlighted at any given time.但我只想在任何给定时间突出显示一个标签。 However, I have only seen how to do it with JQuery, which I can't use.但是，我只看到了如何使用无法使用的 JQuery。 I saw a different example using Javascript, but that was for a fixed size array.我看到了一个使用 Javascript 的不同示例，但那是针对固定大小的数组。
This is the code for my highlighting class:这是我的突出显示类的代码：
<DOCTYPE html>
<html>
<head>
<style>
.selected{border:dotted 2px;border-color:gray;}
</style>
</head>
<body>
<div id='linkEditDiv'>
<form name='linkEditor'>
<table>
<input type="hidden" name='linkId'>
<tr><th>Label:</th><td> <input type='text' name='label'></td></tr>
<tr><th>Link:</th><td> <input type='text' name='link'></td></tr>
<tr><th></th><td><input type="button" onclick='submitForm()' value="OK" ><input type="button" onclick='cancel()' value="Cancel" ></td></tr>
</table>
</form>
</div>
<a href='#' onclick='edit("lr1")' id='lr1'>link1</a>
<a href='#' onclick='edit("lr2")' id='lr2'>link1</a>
<a href='#' onclick='edit("lr3")' id='lr3'>link1</a>
</body>
</html>
3 个解决方案
解决方案1
1 已采纳 2014-08-08 15:30:11
Create a removeClass function that iterates over the elements and replaces the class with an empty string, thus removing it.创建一个 removeClass 函数，该函数迭代元素并将类替换为空字符串，从而将其删除。
function removeClass(selector, klass) {
var elems = document.querySelectorAll(selector);
for (var i = elems.length; i--;) {
var reg = new RegExp("(?:^|\\s)"+ klass +"(?!\\S)", "gi");
elems[i].className = elems[i].className.replace(reg, "");
}
}
解决方案2
0 2014-08-08 15:29:45
Try something like this to remove the class from all of the links, and then add the "selected" class back onto the link that you want to have it:尝试像这样从所有链接中删除类，然后将“选定”类添加回您想要的链接：
var elems = document.getElementsByClassName('selected');
for (var i = 0; i < elems.length; i++) {
elems[i].className = elems[i].className.replace('selected', '')
}
解决方案3
0 2022-02-04 15:17:48
First you grab all selected<\/code> nodes, you loop through them and then you remove the class from each node.首先，您抓取所有selected<\/code>的节点，遍历它们，然后从每个节点中删除该类。
You can't use getElementsByClassName<\/code> because once you remove the class from the first element, the live dom object updates and shifts the positions, which will lead to moving the for loop one position and skipping that element.您不能使用getElementsByClassName<\/code> ，因为一旦从第一个元素中删除类，活动 dom 对象就会更新并移动位置，这将导致 for 循环移动一个位置并跳过该元素。
for (const node of document.querySelectorAll('.selected')) { node.classList.remove('selected') }<\/code><\/pre>.selected { color: red }<\/code><\/pre><p class="selected">Red text <p class="selected">Red text <p>Black text<\/code><\/pre>
"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.