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

jQuery hasClass'不是函数'

3 个答案: