Javascript 基于查询字符串更改锚元素类的最有效方法

标准-我不喜欢使用任何额外的库，只想用纯javascript来执行，但如果需要，我很乐意使用一个

我想向锚元素添加一个额外的类，该锚元素的查询字符串为“xyz=negate”。我的页面通常有200多个锚元素。我正在寻找最有效的方法来实现这一点

我的网站的用户群仍然有相当数量的IE8（intranet站点），因此需要寻找最高效的代码。我的页面有如下锚元素

<a href="http://www.w3schools.com?id=43&xyz=negate">Visit W3Schools.com!</a>
<a href="http://www.w3schools.com?id=47&xyz=nonnegate">Visit W3Schools.com!</a>
<a href="http://www.w3schools.com?id=3&xy=negate">Visit W3Schools.com!</a>
<a href="http://www.w3schools.com?id=42&xyz=negate&yz=external">Visit W3Schools.com!</a>
<a href="http://www.w3schools.com?id=43&xyz=negate">Visit W3Schools.com!</a>

---

我想在上面的示例中将类添加到第一个、第四个和第五个锚元素。

使用选择器中的

*

进行匹配，例如：

var links=document.querySelectorAll("a[href*='xyz=negate']");

它将在属性的任何部分找到href包含xyz=negate的所有链接

在纯js中，不可能像Jquery那样将类设置为集合，所以我们必须遍历每个元素并设置类

for ( var i in links ){

    links[i].classList.add("someClass");
}

对于IE8（类列表不存在）：

---

您可以在纯香草JS中这样做，如果您愿意，也可以使用jQuery

逻辑和原则仍然是一样的：

• 查找所有

  a

  锚元素 其中

  href

  属性包含

  href

• 循环遍历匹配的元素并将类（在示例中，

  .someclass

  ）添加到该元素中

下面是一个JSFIDLE:
我已经包括了jQuery和Vanilla JS解决方案以供比较；只需注释/取消注释即可使用

---

以下是一个纯JS解决方案（IE8+兼容）：

或者干脆

$("a[href*='xyz=negate']").addClass('someclass');

---

编辑： 更新选择器以获得所需的元素，而不是在循环中进行性能检查；正如评论中所建议的那样。当我回到PC上时，我将更新JSFIDLE。JSFIDLE现在是最新的

编辑2: 为清晰起见，删除了将

forEach

循环封装到直接

for

循环中。 添加了替代jQuery解决方案并更新了JSFIDLE

希望这有帮助

---

任何问题，只要问：）

您是否需要实际添加该类，以便仅使用CSS即可完成

a[href*="xyz=negate"]:first-child { 
    background-color: yellow;
}

如果你真的需要这门课的话

var elem = document.querySelector('a[href*="xyz=negate"]');
if(elem) {
    elem.className = elem.className + " active";
}

如果是全部，那就是

a[href*="xyz=negate"] { 
    background-color: yellow;
}

或

var elems=document.querySelectorAll（'a[href*=“xyz=negate”]”）；
对于（var i=0；我可以共享一个查询字符串为xyz=negate的示例锚元素吗？在这种情况下，您需要首先找到所有链接和查询参数。最好添加一个带有查询参数的属性，然后使用
文档。queryselector
我无法控制锚元素如果您没有nt是否使用任何库？您应该发布您为此编写的代码，但该代码效率低下，然后我们可能会对其进行改进。目前，您基本上只是要求他人为您提供代码。使用
“[href*='xyz=negate']”是个好主意。
选择器：）我不知道为什么会投否决票，但是：\n我现在也不知道，有些人喜欢什么都投否决票。我添加了IE8兼容的类名版本。我认为我对这个问题的回答是完整的。否决票是不公平的。@SenthilNatarajan我想有人很无聊。关于否决票的任何细节，伙计们？我喜欢学习-很高兴知道如何提高我的成绩回答..？或者这里的人们只是想赢得一场战争，争夺谁的选票最多？我以为这是一个社区，而不是“每个人都为自己”，不…？我认为选择页面中的所有链接并不是解决此问题的有效方法。我使用*给我们想要的收集和最终循环的解决方案只在想要的链接上完成，而不是在所有链接上完成。感谢您的建议！我同意您的意见，该选择器将更有效。我可以继续编辑我的答案以使用您的想法吗？@GeoffJames-你的解决方案是有效的，但是有没有理由你不直接循环通过锚数组而不是将其传递给另一个函数来实现同样的效果？我追求的是最有效的东西。我将投票支持你的effortHi@snit80-感谢你的建议。我对我最初的JS解决方案有点着迷。简言之，我会首先完成jQuery版本（因为它是最短的），然后使用（非常有用）转换为IE8+兼容性，并没有考虑太多（因此抽象了
forEach
循环，这不是完全必要的）。我已经更新了我的答案，现在显示了我的解决方案的最有效版本。希望这有帮助：）没有人发布仅CSS的解决方案，这就是我发布它的原因。这比getElementBytagname和过滤数组并应用类好吗？
a[href*="xyz=negate"]:first-child { 
    background-color: yellow;
}

var elem = document.querySelector('a[href*="xyz=negate"]');
if(elem) {
    elem.className = elem.className + " active";
}

a[href*="xyz=negate"] { 
    background-color: yellow;
}

var elems = document.querySelectorAll('a[href*="xyz=negate"]');
for (var i=0;i<elems.length;i++) {
    elems[i].className = elems[i].className + " active";
}