jQuery: Accessing an element from an object with multiple instances of a class

Question

I am trying to do a simple tab navigation.

I was thinking I could put all buttons in an object, do the same with the content divs, get index of clicked button and access the content div using that index number to make the respective content show up. What am I doing wrong?

HTML:

<div class="row">
    <a class="btn" href="#">One</a>
    <a class="btn" href="#">Two</a>
    <a class="btn" href="#">Three</a>
    <a class="btn" href="#">Four</a>
</div>
<div class="row">
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content">Content 3</div>
    <div class="content">Content 4</div>
</div>

jQuery:

$(document).ready(function(){
    var $btn = $('.btn');
    var $content = $('.content');

    $btn.each(function(){
        $(this).on('click', function(){
            $content.hide();
            var i = $btn.index(this);
            $content[i].show(); //This does not work
        });
    });
});

jsFiddle: http://jsfiddle.net/pcr0zuuo/

Thanks in advance!

You need to use .eq(i) instead of [i] to keep it as a jQuery object. — Taplar
– Taplar, Commented Nov 10, 2015 at 18:41

Taplar · Accepted Answer · 2015-11-10 18:43:46Z

1

Your issue is that show() is a jQuery function. However doing the offset [i] off of a jQuery object will return you the raw dom element. You should use eq(index) instead to get the jQuery object back to operate on.

answered Nov 10, 2015 at 18:43

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Starich · Accepted Answer · 2015-11-10 18:45:56Z

1

Essentially the issue is that you tried using a jQuery function on a normal DOM node. You can fix it in two ways:

$( $content[i] ).show()

or

$content.eq(i).show()

Both should properly wrap the element and show it as you'd expect. (http://jsfiddle.net/pcr0zuuo/1/)

answered Nov 10, 2015 at 18:45

John Starich

61911 silver badges15 bronze badges

Comments

DinoMyte · Accepted Answer · 2015-11-10 18:54:45Z

1

You logic is correct. You can target the index of the class .btn and show the corresponding divs.

If you want to use jquery, use index() function to find index and eq to target the index.

$('.btn').click(function()
{
    $('.content').eq($(this).index()).show();
});

http://jsfiddle.net/eqntjb01/

Alternately, you can implement it via javascript ( the way you were trying to do in the example )

$('.btn').click(function()
{
  $('.content')[$(this).index()].style.display = "block";
});

http://jsfiddle.net/eqntjb01/1/

edited Nov 10, 2015 at 18:54

answered Nov 10, 2015 at 18:49

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:15:42Z

1

jQuery's collections aren't arrays of jQuery objects, the array reference is to the DOM object. The collection of $content can't be referenced with [] to run jQuery functions. So change to:

$content.eq(i).show();

and it works in your jsFiddle. (Thanks to Taplar for the hint)

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Nov 10, 2015 at 18:47

Alderin

1501 silver badge8 bronze badges

Collectives™ on Stack Overflow

jQuery: Accessing an element from an object with multiple instances of a class

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related