Javascript $（元素）[index].addClass（）；不起作用

我有多个元素和同一个类。当我使用下面的方法时，它不起作用

$(".tab-content")[index].addClass("active-content");

我的代码：

HTML:

---

一个小小的改变可能会对你有所帮助

$(".tag li").click(function () {
            var index = $(this).index();
            $(".tab-content").eq(index).addClass("active-content");
 });

看看这个

 $(".tag li").click(function () {
        var index = $(this).index();
       $(".tab-content").removeClass("active-content");
       $($(".tab-content")[index]).addClass("active-content"); 
});

---

除了将活动类添加到选项卡内容之外，请确保我们删除了其余选项卡内容上的活动类。（这同样是基于我们的要求）

这是因为

.addClass（）

是一个jQuery方法，而不是本机JS方法

当您使用

$（“.tab content”）[index]

时，您正在jQuery对象中选择真正的DOM元素。使用

document.getElementById（“id”）

时获得的相同类型的元素

就像将其与jQuery方法相结合一样：

document.getElementById（“id”）.addClass（“class”）

这也会产生一个错误并且不起作用：

$（“.tab内容”）[index].addClass（“类”）

为了让它正常工作，您必须坚持使用jQuery。幸运的是，jQuery有一个方法可以做到这一点：。与
.addClass（）
一样，这是一个jQuery方法，因此您可以以相同的方式使用它


解决方案：
$（.tab内容”）.eq（索引）.addClass（“活动内容”）

此方法将在完整匹配元素集的给定索引处选择元素，并仅对该元素执行操作


经过一番努力，我想出了代码的另一种实现方式。

我想我应该把它放在这里，也许有人会发现它很有用：


$（“.select”）.change（函数（）{
$（“.tab.active”）.removeClass（“active”）.addClass（“hidden”）；
$（“.tab”）.eq（$（this）.children（“选项：选定”）.index（））.removeClass（“隐藏”）.addClass（“活动”）；
});
.tab.hidden{display:none；}

伦敦
巴黎
东京
伦敦伦敦是英国的首都

巴黎巴黎是法国的首都

东京东京是日本的首都

Try eq function eq（）是解决方案，非常感谢您的帮助。好的，很多人已经有了解决方案，但您的问题是：您正在尝试对包含节点的HTMLCollection调用方法。您无法从数组上下文中选择节点，因为您要调用jQuery方法，因此需要使用jQuery的对象。谢谢您的解释。在阅读了您的解释并做了一些研究之后，这就是我所理解的，$（“.class”）将返回一个jQuery对象列表，$（“.class”）[index]将返回与document.getElementByClassName（class）[index]相同的结果，这是一个真正的Dom元素。但是像addClass（）这样的jQuery方法只能处理jQuery对象，所以当我组合它们时，它们的语法将不正确。我理解正确吗@myfunckyside@Willy是的，这是正确的，如果您打开DevTools（F12），您还将得到一个确认这一点的错误：uncaughttypeerror:$（…）[index]。addClass不是函数，因为编译器现在正在寻找与本机DOM元素一起使用的本机JS方法/函数。然后它遇到了
addClass
，它不能识别为有效的（本机）方法/函数，因为它是jQuery。我知道了！非常感谢。
$(".tag li").click(function () {
            var index = $(this).index();
            $(".tab-content").eq(index).addClass("active-content");
 });

 $(".tag li").click(function () {
        var index = $(this).index();
       $(".tab-content").removeClass("active-content");
       $($(".tab-content")[index]).addClass("active-content"); 
});