Question

标准 - 我不想使用任何额外的库，只想使用纯javascript执行此操作，但很乐意在需要时使用它。

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

我的网站的用户群仍然有相当数量的IE 8（内部网站点），因此寻找最有效的代码。我的页面有锚元素，如下所示

<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>

我想在上面的例子中将class添加到第一个，第四个和第五个锚元素。

Answer 1

在选择器中使用*进行匹配，例如：

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

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

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

for ( var i in links ){

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

对于IE8（classList不存在）：

for ( var i in links ){

    links[i].className+="someClass";
}

Answer 2

如果您愿意，可以使用纯vanilla JS或者使用jQuery来执行此操作。

逻辑和原则仍然相同：

找到所有a个锚元素 href

"xyz=negate"

href

循环匹配元素并将类（在示例中为.someclass）添加到该元素

这是一个JSFiddle：https://jsfiddle.net/ana4upbh/4/
我已经包含了jQuery和Vanilla JS解决方案以进行比较;只需评论/取消注释即可使用

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

// select all "a" (anchor) elements with the query string 
var anchors = document.querySelectorAll("a[href*='xyz=negate']");

// loop through each of the matching elements 
for (var i = 0; i < anchors.length; i++) {
  var el = anchors[i];
  // add the 'someclass' class to the element (or whatever meaningful name you use)
  if (el.classList)
    el.classList.add('someclass');
  else
    el.someclass += ' someclass';
}

或者，这是一个jQuery版本：

$("a[href*='xyz=negate']").each(function(i) {
    $(this).addClass('someclass');
});

或只是

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

修改更新了选择器以获得所需的元素，而不是在循环内进行检查以获得性能;正如评论中所建议的。 ~~当我回到PC上时，我将更新JSFiddle~~ JSFiddle现在是最新的

编辑2： 为清楚起见，删除了将forEach循环封装到直接for循环中。添加了替代jQuery解决方案并更新了JSFiddle。

希望这有帮助！

有任何问题，请问：）

Answer 3

你是否需要实际添加类，所以你能用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"]');
for (var i=0;i<elems.length;i++) {
    elems[i].className = elems[i].className + " active";
}

基于查询字符串

3 个答案: