index() successively returns -1 after first time while a result should have been found

[Kennisnet]

When executing this code:

jQuery.fn.test = function() {

return this.each(function() {

var $select = $(this); var $options = $select.find('.options'); var options = $options.find('li');

alert(options.index($('.active')));

});

}

$(function() {

$('.select').test();

});

on a document with this HTML snippet (see attached file for working example)

... <div class="select">

<div class="options">

<ul>

<li><a href="#">Option 1</a></li> <li class="active"><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> <li><a href="#">Option 4</a></li> <li><a href="#">Option 5</a></li>

</ul>

</div>

</div> <div class="select">

<div class="options">

<ul>

<li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> <li><a href="#">Option 3</a></li> <li class="active"><a href="#">Option 4</a></li> <li><a href="#">Option 5</a></li>

</ul>

</div>

</div> ...

'1' and '-1' are alerted, while I would have expected '1' and '3'.

Is this correct behaviour or possibly a bug?

[dmethvin]

You have *two* elements that contain a child with class "selected", but your .index() only searches for the child in the first "select". If you need more help with the logic, ask in one of the jQuery forums. That's the best place to start before filing a bug.

Also, I strongly recommend against what you seem to be doing here -- reinventing standard user interface controls from scratch. Web browsers do a lot of things for free that this code/markup does not, such as supporting ARIA, screen readers, and keyboard access. If you want to embellish a select, start with a real select in the markup and use progressive enhancement.