jQuery hasClass 'is not a function'

Question

我想使用jQuery检查一个li元素列表中哪个li元素是活动状态（它们表示菜单，我想要检查当前活动的菜单项）。

因此，我将所有li项存储在变量myElements中。然后我询问myElements的长度，并对它们应用一些样式更改，到这里一切正常。显然，以这种方式，我的变量myElements是一个Nodelist，而不是一个数组，因此我声明另一个变量myElements_array，其中包含与myElements相同的元素，并且是一个数组（也经过测试并正常工作）。

然后我尝试检查myElements_array中哪个元素具有“current-menu-item”类，但它不起作用，谷歌浏览器控制台显示错误：“Uncaught 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>

- rubencart

---

myElements_array[j] 可能不是一个有效的 DOM 对象。 - A.B

@A.B 嗯，它是一个DOM对象... - epascarello

.hasClass 是 jQuery 的方法，不能在 DOM 对象上调用。 - Barmar

var j = jQuery("#navbar > ul > li.current-menu-parent").length; - Travis J

@epascarello，我想说的是相反的事情，不是一个jQuery对象而是DOM :) - A.B

Answer 1

问题是你从数组中取出的索引是一个DOM节点，当你使用方括号表示法时，它不是一个jQuery对象。 DOM没有hasClass方法。

你可以将其存储为jQuery版本或更改为jQuery。

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

或者使用 classList contains 方法

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

或使用eq()来代替引用DOM。

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

- epascarello

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"));

- Barmar

Answer 3

不应该像那样循环遍历jQuery对象内部的元素。你试图在普通的DOM对象上使用jQuery方法。请改用下面的代码：

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

- Okku