jQuery hasClass'不是函數'

Question

我想用jQuery檢查li元素列表中的li元素是活動元素（它們代表一個菜單，我想檢查哪個菜單項當前是活動的）。

因此，我將所有li項存儲在變量myElements中。 然后我問myElements的長度，並對它們應用一些樣式更改，到此為止一切正常。 顯然這樣我的變量myElements是一個Nodelist，而不是一個數組，所以我聲明了另一個變量; myElements_array，它包含與myElements相同的元素，並且是一個數組（也經過測試並且可以工作）。

然后我嘗試檢查myElements_array中哪些元素具有'current-menu-item'類，但它不起作用，谷歌Chrome控制台說有錯誤：'未捕獲的TypeError：myElements_array [j] .hasClass不是一個功能'。 有誰知道原因可能是什么？

<script type='text/javascript'>
var myElements = jQuery("#navbar > ul > li");
var count = myElements.length;

for (var i = 0; i < myElements.length; i++) {
myElements[i].style.width = (100/count)+'%';
}

var myElements_array = [];
for(var i = myElements.length; i--; myElements_array.unshift(myElements[i]));

var j = 0;
while (! myElements_array[j].hasClass('current-menu-parent') ) {
j++;
}
document.write(j);
</script>

Answer 1

問題是當您使用括號表示法並且它不是jQuery對象時，您從數組中提取的索引是DOM節點。 DOM沒有hasClass。

您可以存儲jQuery版本或將其更改為jQuery

while (! $(myElements_array[j]).hasClass('current-menu-parent') ) {

或者使用classList包含

while (! myElements_array[j].classList.contains('current-menu-parent') ) {

或使用eq()而不是引用DOM

while (! myElements_array.eq(j).hasClass('current-menu-parent') ) {

Answer 2

當您訪問jQuery對象時，就像它是一個數組一樣，它返回原始DOM元素對象，而不是jQuery對象。 如果你想要一個jQuery對象，使用.eq()而不是數組索引：

while (myElements.eq(j).hasClass('current-menu-parent') ) {
    j++;
}

你也可以使用：

j = myElements.index(myElements.find(".current-menu-parent:first"));

Answer 3

你不應該像這樣循環遍歷jQuery對象中的元素。 你想在普通的dom對象上使用jQuery方法。 請改用：

$("#navbar > ul > li").each(function(){
    $(this).hasClass("current-menu-parent");
});