document.getElementsByClassName 与类完全匹配答案

【问题标题】：document.getElementsByClassName exact match to classdocument.getElementsByClassName 与类完全匹配
【发布时间】：2013-02-09 21:37:31
【问题描述】：

有两个相似的类 - 'item' 和 'item one'

当我使用document.getElementsByClassName('item') 时，它会返回与上述两个类匹配的所有元素。

我怎样才能获得只有“项目”类的元素？

【问题讨论】：

最后一个不是类似的类，是完全相同的类，和类one，空格分隔表示两个不同上课！

标签： javascript

【解决方案1】：

document.querySelectorAll('.item:not(.one)');

（见querySelectorAll）

另一种方法是遍历 document.getElementsByClassName('item') 返回的内容，并检查 one 类是否存在（或不存在）：

if(element.classList.contains('one')){
  ...
}

【讨论】：

OP 没有指定 jquery。
对，但不推荐。见stackoverflow.com/questions/11503534/…
该答案详细说明了 jQuery 相对于使用 querySelectorAll 的优势。如果您开始谈论兼容性，那么您应该知道getElementsByClassName 在浏览器之间也是不一致的。由 OP 来支持旧版浏览器，如果他愿意的话

【解决方案2】：

类名item one 表示该元素具有类item 和类one。

所以，当您执行document.getElementsByClassName('item') 时，它也会返回该元素。

你应该这样做来选择只有类item的元素：

e = document.getElementsByClassName('item');
for(var i = 0; i < e.length; i++) {
    // Only if there is only single class
    if(e[i].className == 'item') {
        // Do something with the element e[i]
        alert(e[i].className);
    }
}

这将检查元素是否只有类item。

Live Demo

【讨论】：

好的，我明白了。但是我怎样才能得到属于“item”类而不是“one”类的元素呢？
(e[i].className!="item one") 有效，但不适用于您的情况。我想是因为在我的情况下，头等舱是“项目”
@Marat 你能分享你的 HTML 吗？

【解决方案3】：

您将要创建自己的函数以进行完全匹配，因为类中的空格意味着它具有多个类。比如：

function GetElementsByExactClassName(someclass) {
  var i, length, elementlist, data = [];

  // Get the list from the browser
  elementlist = document.getElementsByClassName(someclass);
  if (!elementlist || !(length = elementlist.length))
    return [];

  // Limit by elements with that specific class name only
  for (i = 0; i < length; i++) {
    if (elementlist[i].className == someclass)
      data.push(elementlist[i]);
  }

  // Return the result
  return data;
} // GetElementsByExactClassName

【讨论】：

如果 className 被指定为<elem class=" test " /> 这将不包括它，即使它只有一个类。不要让你的测试成为严格的字符串相等。否则，好的答案+1
在这种情况下，它仍然是正确的，因为我假设他希望测试完全是类字段中的内容。他没有具体说明这是否是要求。但是，是的，我也可以看到...
它确实与类完全匹配...class 属性中的空格无关紧要。他没有说完全匹配类属性，因为那没有意义

【解决方案4】：

如果您有 jQuery，可以使用 attribute equals selector 语法来完成，如下所示：$('[class="item"]')。

如果您坚持使用document.getElementsByClassName，请查看其他答案。

【讨论】：

【解决方案5】：

您可以使用Array.filter 将匹配集过滤为仅具有test 类的匹配集：

var elems = Array.filter( document.getElementsByClassName('test'), function(el){
    return !!el.className.match(/\s*test\s*/);
});

或者只有test 而不是one：

var elems = Array.filter( document.getElementsByClassName('test'), function(el){
    return el.className.indexOf('one') < 0;
});

（Array.filter 的工作方式可能因您的浏览器而异，并且不适用于旧版浏览器。）为了获得最佳浏览器兼容性，jQuery 非常适合：$('.test:not(.one)')

【讨论】：