使用jQuery操作li类时遇“is not a function”错误求助

嘿，我一眼就揪出问题所在啦！你碰到的Uncaught TypeError: navI.addClass is not a function错误，核心原因是你在原生DOM元素上调用了jQuery专属方法。

问题根源拆解 #

看这段代码：

var navI = nav[$i].parentElement

nav[$i]是从jQuery集合里取出的原生DOM元素，再调用parentElement拿到的依然是原生DOM节点。而addClass()是jQuery对象特有的方法，原生DOM元素根本没有这个方法，自然会触发报错啦。

快速修复方案 #

只需要把原生DOM元素转换成jQuery对象就行——用$()把它包裹起来，就能调用jQuery的方法了：

$(navI).addClass('menu-active')

另外还有个小细节要调整：你写的nav.parent().removeClass('menu-active')会把所有.nav-a的父元素都移除类，改成精准定位所有带menu-active的父元素会更合理。

修复后的完整代码（保留你的原逻辑） #

$(document).ready(function (){ 
  var title = $('title') 
  var nav = $('.nav-a') 
  for (let $i = 0 ; $i < nav.length ; $i++) { 
    if (title[0].text === nav[$i].text){ 
      var navI = nav[$i].parentElement 
      // 先移除所有菜单的active类
      $('.nav-a').parent().removeClass('menu-active')
      // 把原生DOM转成jQuery对象再调用addClass
      $(navI).addClass('menu-active') 
    } 
  } 
})

更简洁的jQuery风格写法（推荐） #

其实完全不用原生for循环，用jQuery的each()方法更贴合框架风格，还能避免原生和jQuery对象混淆的问题：

$(document).ready(function (){ 
  const pageTitle = $('title').text();
  $('.nav-a').each(function() {
    if ($(this).text() === pageTitle) {
      // 移除所有active类
      $('.nav-a').parent().removeClass('menu-active');
      // 给当前元素的父节点添加类
      $(this).parent().addClass('menu-active');
    }
  });
})

这样写不仅代码更清爽，还能降低出错概率哦！

内容的提问来源于stack exchange，提问作者Marc_Landers