Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Chris Mason
.a{fill-rule:evenodd;}techdegree seal-36
Chris Mason
Full Stack JavaScript Techdegree Graduate 24,526 Points

Unable to access index of list item using jQuery

The script generates 5 list items, inside an unordered list inside a div element with the class "pagination"

The following function adds a class "active" to whichever list item is clicked, after having removed that class from any other list items that had it. This bit works fine.

The problem I'm having is in finding the index number of the list item that currently has the class "active". the only value that gets logged to the console is -1. Any pointers?

$(document).ready(function(){
    $( "div.pagination" ).find( "a" ).on('click', function(){
        $("a").removeClass("active"); //removes any "active" value from the LIs
        $( "ul.student-list" ).children( "li" ).hide(); //hide all the students
        $(this).addClass("active"); //make the clicked page "active"

        var index = $("a").find("active").index();
        console.log(index);
        }
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Chris,

You're referring to list items in your description of the problem but it looks like you're removing and applying the active class to the links within those list items.

Is it the links you're intending to work with or the list items?

Chris Mason
.a{fill-rule:evenodd;}techdegree seal-36
Chris Mason
Full Stack JavaScript Techdegree Graduate 24,526 Points

Hi Jason,

I'm trying (and failing) to work with the 5 list items. Each list item has an anchor element, and I'm trying to work with the list items by selecting the list item whose anchor element has a class of 'active'.

I've had a go at this just now, but I'm still getting an index of -1 returned, which I see from the jQuery documentation means "If the element is not found, .index() will return -1.". 

var index = $("li a.active").index(this);
console.log(index);

I'm kind of at the point where I'm just trying various things without really having a clue what I'm doing. I've stared at the jQuery index() documentation all day but can't seem to make sense of this problem

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Are you sure that last attempt returned -1? It should be returning 0 regardless of which link you clicked on.

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Your original attempt with find() wouldn't work out because find() is searching the descendants of the links, but it's the links themselves that have the "active" class.

You mentioned having trouble in general with the index() method so I'll try to show you the different ways you could get the index depending on which of the 3 variations you use.

The first variation in the docs is with no arguments. As it mentions, this only works on siblings. The links are not siblings to each other but the parent li's are. So if you get the parent of the active link and then call .index() on the li it will give you the index of that li in relation to it's siblings.

// .index()
var index = $(".active").parent().index();
// or
var index = $(this).parent().index();

In the next 2 examples I've made your "a" tag selector more specific because you likely have more links on your page and if you select them all it will throw off the index that is returned. Review all of your selectors and make sure they are not selecting anything else on the page outside of your student list.

In the second variation, you would call it on the active link and pass in a selector that selects all the links. This will try to match the active link against the set of elements given by the selector.

// .index(selector)
var index = $(".active").index(".student-list a");
// or
var index = $(this).index(".student-list a");

In the 3rd variation you would call the index() method on the set of all links and pass in the element you're trying to get the index of.

// .index(element)
var index = $(".student-list a").index($(this));
// or
var index = $(".student-list a").index($(".active"));
// or
var index = $(".student-list a").index(this);

In my mind, the 2nd and 3rd variations are kind of the reverse of each other.

I think the no argument version is the easiest to understand and I would use that for your particular problem and only use the 2nd or 3rd variations when the 1st one wouldn't work out. But if another one makes more sense to you then use that.

Chris Mason
.a{fill-rule:evenodd;}techdegree seal-36
Chris Mason
Full Stack JavaScript Techdegree Graduate 24,526 Points

This has been incredibly helpful. Thank you very much for taking the time and effort.

I can now see where I was going wrong and have got the code working using the 1st variation.

As to your comment above, "Are you sure that last attempt returned -1? It should be returning 0 regardless of which link you clicked on" Yes, you're right - I tried it again and got zero. I think I was confusing with some other attempts where I was getting -1.

Cheers, Chris

Daniel Gonzalez
Daniel Gonzalez
22,105 Points
Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Hi Chris,

I believe it is because you are leaving .index(); empty which will return the position of the first element within the set of matched elements in relation to its siblings. Try adding this inside .index(this); and it should give you the index location of the element. 

$(document).ready(function(){
    $( "div.pagination" ).find( "a" ).on('click', function(){
        $("a").removeClass("active"); //removes any "active" value from the LIs
        $( "ul.student-list" ).children( "li" ).hide(); //hide all the students
        $(this).addClass("active"); //make the clicked page "active"

        var index = $("a").find("active").index(this);
        console.log(index);
        }
Daniel Gonzalez
Daniel Gonzalez
22,105 Points

https://api.jquery.com/index/

Chris Mason
.a{fill-rule:evenodd;}techdegree seal-36
Chris Mason
Full Stack JavaScript Techdegree Graduate 24,526 Points

Thanks Daniel - I've just tried that but unfortunately it's still returning -1 to the console.

I'm finding index() in jQuery quite difficult to work with!

Daniel Gonzalez
Daniel Gonzalez
22,105 Points
Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Darn I for sure thought that would help! I think I narrowed part of the issue, the "-1" error could be due to the index not finding an element with the class ".active". You are also missing the period for the class .active in var index that could be the problem! :) 

$(document).ready(function(){
    $( "div.pagination" ).find( "a" ).on('click', function(){
        $("a").removeClass("active"); //removes any "active" value from the LIs
        $( "ul.student-list" ).children( "li" ).hide(); //hide all the students
        $(this).addClass("active"); //make the clicked page "active"

        var index = $("a").find(".active").index(this);
        console.log(index);
        }
Chris Mason
.a{fill-rule:evenodd;}techdegree seal-36
Chris Mason
Full Stack JavaScript Techdegree Graduate 24,526 Points

Thanks for the help Daniel. Jason's answer got things fixed, but I appreciate your help all the same!