Jquery index of hovered element, jquery examples

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

The following function adds a class "active" khổng lồ whichever các mục item is clicked, after having removed that class from any other list items that had it. This bit works fine.

Bạn đang xem: Jquery index of hovered element, jquery examples

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);

*

Hi Chris,

You"re referring to menu items in your mô tả tìm kiếm of the problem but it looks lượt thích you"re removing and applying the active class khổng lồ the links within those list items.

Is it the liên kết you"re intending to lớn work with or the list items?



Hi Jason,

I"m trying (and failing) to work with the 5 các mục items. Each list item has an anchor element, và I"m trying to work with the list items by selecting the danh sách 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.".


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 lớn make sense of this problem


*

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


*

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

You mentioned having trouble in general with the index() method so I"ll try to lớn 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 khổng lồ each other but the parent li"s are. So if you get the parent of the active liên kết and then call .index() on the li it will give you the index of that li in relation lớn it"s siblings.

Xem thêm: Bài Thuốc Dân Gian Trị Tê Tay Ngay Tại Nhà Chỉ Với 1 Củ Gừng


In the next 2 examples I"ve made your "a" tag selector more specific because you likely have more liên kết on your page và if you select them all it will throw off the index that is returned. Nhận xét all of your selectors và make sure they are not selecting anything else on the page outside of your student list.

In the second variation, you would điện thoại tư vấn it on the active links and pass in a selector that selects all the links. This will try lớn match the active liên kết against the mix of elements given by the selector.


// .index(selector)var index = $(".active").index(".student-list a");// orvar index = $(this).index(".student-list a");
In the 3rd variation you would hotline the index() method on the mix of all liên kết and pass in the element you"re trying to get the index of.


// .index(element)var index = $(".student-list a").index($(this));// orvar index = $(".student-list a").index($(".active"));// orvar index = $(".student-list a").index(this);
In my mind, the 2nd & 3rd variations are kind of the reverse of each other.

I think the no argument version is the easiest khổng lồ understand & 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.



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

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

As khổng lồ your phản hồi 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


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); & 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);
Thanks Daniel - I"ve just tried that but unfortunately it"s still returning -1 to lớn the console.

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


Darn I for sure thought that would help! I think I narrowed part of the issue, the "-1" error could be due khổng lồ 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);
Thanks for the help Daniel. Jason"s answer got things fixed, but I appreciate your help all the same!


Posting to lớn the forums is only allowed for members with active accounts. Please sign in or sign up khổng lồ post.