I have multiple element with the same class. When I use this method below, it does not work.

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

My code:

HTML:

<div class="container">
    <div class="content">
        <ul class="tag">
            <li>
                <a href="javascript:;">
                    Lodon
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    Paris
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    Tokyo
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <h3>Lodon</h3>
            <p>London is the capital of England</p>
        </div>
        <div class="tab-content">
            <h3>Paris</h3>
            <p>Paris is the capital of France</p>
        </div>
        <div class="tab-content">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan</p>
        </div>
    </div>
</div>

And JS

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

I have multiple element with the same class. When I use this method below, it does not work.

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

My code:

HTML:

<div class="container">
    <div class="content">
        <ul class="tag">
            <li>
                <a href="javascript:;">
                    Lodon
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    Paris
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    Tokyo
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <h3>Lodon</h3>
            <p>London is the capital of England</p>
        </div>
        <div class="tab-content">
            <h3>Paris</h3>
            <p>Paris is the capital of France</p>
        </div>
        <div class="tab-content">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan</p>
        </div>
    </div>
</div>

And JS

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

https://codepen.io/WillyIsCoding/pen/KoMxMJ

• javascript
• jquery

• Okay a lot of people already have the solution but here is what your problem is: You are trying to call a method on a HTMLCollection which consists of Nodes. You cannot select the Node from an array contect as you want to call a jQuery Method so you need such an object that uses jQuery. – getjackx Commented Mar 16, 2018 at 7:12

4 Answers 4

That's because .addClass() is a jQuery-method, not a native JS-method.

And when you use $(".tab-content")[index], you are selecting the true DOM-element within the jQuery-object. The same kind of element you get when you use document.getElementById("id").

And just like when you would combine that with a jQuery-method:
document.getElementById("id").addClass("class");
this too will generate an error and not work:
$(".tab-content")[index].addClass("class");

In order to get this working, you have to stick with jQuery. Luckily, jQuery has a method to do just that: .eq(). Just like .addClass(), this is a jQuery-method so you can use it in the same manner.

SOLUTION: $(".tab-content").eq(index).addClass("active-content");

This method will select the element at the given index of the complete set of matching elements, and only perform the action on that one element.

After a bit of fiddling around, I came up with this alternative implementation of your code.
I thought I'd put it on here, maybe someone will find it useful:

$(".select").change(function() {
  $(".tab.active").removeClass("active").addClass("hidden");
  $(".tab").eq($(this).children("option:selected").index()).removeClass("hidden").addClass("active");
});

.tab.hidden {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <select class="select">
    <option selected="selected">London</option>
    <option>Paris</option>
    <option>Tokyo</option>
  </select>
  <div class="tab active"><h3>London</h3><p>London is the capital of England</p></div>
  <div class="tab hidden"><h3>Paris</h3><p>Paris is the capital of France</p></div>
  <div class="tab hidden"><h3>Tokyo</h3><p>Tokyo is the capital of Japan</p></div>
</div>

A small change might help you

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

Check out this one

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

In addition to adding active class to your tab content, make sure we remove active class on the remaining.(again its based on our requirement)

This is another solution.

First you need to access the element

var el = $('.tab-element')[index];

And then assign the class

$( el ).addClass("any-class");

That's work for me.

This is a small version:

$( $('.tab-element')[index] ).addClass("any-class");