Question

Expected result is to get red all special divs between first and last selected div.

This works but couldnt be it better written?:

var s = $('div.selected'),
    $spec = $('.speial'),
    i = s.first().index('.speial'),
    last = s.last().index('.speial');
for(;i<last;i++){
  $spec.eq(i).addClass('gored');
}

I was trying this:

var s = $('div.selected'),
    $spec = $('.speial'),
    i = s.first().index($spec),
    last = s.last().index($spec);
for(;i<last;i++){
  $spec.eq(i).addClass('gored');
}

But it doesnt work… I am interested in the reason why.
Or maybe is there even better way to achieve the same result?

EDIT: I have made the fiddle to get picture of the problem 🙂 fiddle

Answer 1

jQuery API doc:

If .index() is called on a collection of elements and a DOM element or
jQuery object is passed in, .index() returns an integer indicating the
position of the passed element relative to the original collection.

If a selector string is passed as an argument, .index() returns an
integer indicating the position of the first element within the jQuery
object relative to the elements matched by the selector. If the
element is not found, .index() will return -1.

So It seems I have firstly misunderstood the relativity in both cases, so I thought that “elements matched by the selector” could be replaced by selection (jQuery object).

The answer is that .index() works another way than I expected.