Problem with jQuery index()

Related searches

There must be something simple I am missing. I'm trying to get the index of the element but keep getting -1.

HTML:

<div id="rating_boxes">
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
<img src="/img/ratingbox.gif" class="ratingbox" alt="Rate this Speech" />
</div>

jQuery:

$("img.ratingbox").hover(function() {
    var index = $(this).parent().index(this);
            // have also tried $("#rating_boxes").index(this);
            // and $("#rating_boxes").index($(this));
            // and $(this).parent().index($(this));
    alert(index);
    $(this).attr('src', '/img/ratingbox-selected.gif');
}, function() {
    $(this).attr('src', '/img/ratingbox.gif');
});

I tend to steer clear of using index() in jQuery 1.3.2 and previous as it feels unintuitive to use. I simply use

$(this).prevAll().length

to get the index. calling size() on prevAll() simply returns the value of the length property, so I prefer to just use length directly and skip the extra function call.

For example,

$("img.ratingbox").hover(function() {
    var index = $(this).prevAll().length;
    alert(index);
    $(this).attr('src', '/img/ratingbox-selected.gif');
}, function() {
    $(this).attr('src', '/img/ratingbox.gif');
});

In jQuery 1.4, you'll simply be able to call index() on a jQuery object to get the index of the first element in the object.

Using jQuery's .index() Function, index() is a method on jQuery objects that's generally used to search for a given element within the jQuery object that it's called on. This method� Index: 1. If we use a string as the .index() method's argument, it is interpreted as a jQuery selector string. The first element among the object's matched elements which also matches this selector is located.


index() returns the index of the given element with a list of elements, not within a parent element. To find the index of the clicked image, you need to find all the images, not the parent of all the images.

You want something like this:

// Find all the images in our parent, and then find our index with that set of images
var index = $(this).parent().find("img").index(this);

You're also using the id selector instead of the class selector in your 2nd example. Instead of

$("#rating_boxes").index($(this)); // your way - select by ID

You want

$(".rating_boxes").index(this); // select by class

.index(), index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements. If .index() is called� The index() is an inbuilt method in jQuery which is used to return the index of the a specified elements with respect to selector. Syntax: $(selector).index(element) Parameter: It accepts an optional parameter “element” which is used to get the position of the element. Return value: It returns an integer denoting the index of the specified


If you want to know the position of the rating box, a more robust way is to use:

var index = $(this).prevAll('img').size();

I.e., calculate the number of img elements before this element. The index method requires you to first select the parent element, then all img elements inside. This is a tad faster.

[jQuery] index() problem, [jQuery] index() problem. in Using jQuery • 11 years ago. Seems like this should be straightforward based on the documentation: <select id="mySelect"> If you update your JQuery library references to a newer version you may see z-index problems on your pages. Where the z-index of the modal dialog widget in older versions of JQuery was 1002, the z-index as of JQuery UI 1.10.2 is 100 .


If there is a div or section which also contains img before this div, the solution

var index = $(this).prevAll().length;

will not work as it gives same answer as using

$(this).index();

The solution that works fine for any of these scenario is

var index = $(this).parent().find("img").index(this);

I have just applied these two methods to solve my problem.

.eq(), eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set. Consider a page� Tried Chris’s jQuery code but it didn’t fix it, so I wrote this quick function below that sets the current items z-index to a high amount, while lowering the rest of the siblings. Although it works a treat, it is only an example and can definitely be improved… var z_index_max = 1000, z_index_default = 100;


jQuery, The index() is an inbuilt method in jQuery which is used to return the index of the a specified elements with respect to selector. Syntax: Click second "Reload Grid With Less Data" button and see grid reloads, but page index is carried over from previouse request. If you view source of aspx page you will see that onclick I will explicitly set {page: 1} ($('#scrolling').setGridParam({page:1, filter: 1}).trigger('reloadGrid');").


The problem is that when I click the add/edit/delete buttons for editing the grid, the edit window appears behind the modal dialog. I've tried setting the z-index on my dialog to something like 1000 - jqgrid supposedly uses a z-index of 3000 I've seen.


jQuery eq() method. The jQuery eq() method is used to get an element with a specific index of the selected HTML element. You can give either positive or negative integer value as index. The index of the first element of the matched element is 0.