document.getElementsByClassName精确匹配

类

有两个相似的类 - “项”和“项目一个”document.getElementsByClassName精确匹配

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

我如何才能获得元素'物品'类？

来源

2013-02-24 Marat

最后一个不是类似的班级，而是完全相同的班级，***班级和***班级，空间分隔意味着两个不同的班级！ – adeneo 2013-02-24 18:42:48

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

来源

2013-02-24 18:44:01 ATOzTOA

好吧，我明白了。但是，我如何才能获得属于班级“项目”而不是班级“一”的元素？ – Marat 2013-02-24 18:51:13

@Marat更新回答举例... – ATOzTOA 2013-02-24 18:56:56

（e [i] .className！=“item one”）起作用，但不是您的情况。我认为，因为在我的情况下，头等舱是'项目' – Marat 2013-02-24 19:11:21

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

（见querySelectorAll）

的另一种方式是环比什么document.getElementsByClassName('item')回报，并检查one类存在（或不）：

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

来源

2013-02-24 18:43:53

没有由OP指定的jquery。 – ATOzTOA 2013-02-24 18:45:57

这不是jQuery – 2013-02-24 18:46:45

是的，但不推荐。查看http://stackoverflow.com/questions/11503534/jquery-vs-document-queryselectorall – ATOzTOA 2013-02-24 18:48:17

你会想为精确匹配自己的功能，因为在一类空间意味着它有多个类。喜欢的东西：

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

来源

2013-02-24 18:53:13

如果className被指定为''这将不包括它，即使它只有一个类。不要让你的测试严格的字符串平等。否则，很好的答案+1 – nbrooks 2013-02-24 19:01:53

在这种情况下，它仍然是正确的，因为我假设他希望测试完全符合班级领域的要求。他没有具体说明这是否是要求。但是，我可以看到，以及...... – 2013-02-24 19:06:02

以及它完全匹配类...空间在'class'属性中是不相关的。他没有说完全符合班级属性，因为这没有意义 – nbrooks 2013-02-24 19:10:24

您可以使用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将是极好的这样：$('[class="item"]')：$('.test:not(.one)')

来源

2013-02-24 18:54:17 nbrooks

如果您有jQuery的，它可以使用attribute equals selector语法这样做。

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

来源

2017-11-09 15:08:13 fxlemire

document.getElementsByClassName精确匹配

回答

相关问题