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精確匹配

回答

相關問題