Why is my $ (selector) .index (filter selector) returning an incorrect result?

Question

I have a pages variable

 pages = $("[data-role=page]:not([data-url])"); 

which the

 [ <div data-role=​"page" id=​"home" class=​"home ui-page ui-body-c" tabindex=​"0" style=​"min-height:​ 548px;​">​…​</div>​ , <div data-role=​"page" id=​"login" class=​"login ui-page ui-body-c ui-page-active" tabindex=​"0" style>​…​</div>​ ] 

But when I use pages.index(".ui-page-active") , I get -1 - the wrong result.

However, when I search for pages.index(".ui-page") , I get 1 - the correct result.

Any ideas?

UPDATE:

pages.index( $('.ui-page-active') ) returns 1 - the correct result! But why does the option not work?

Answer 1

The .index() method takes the first element of your current selection and looks for it among all the elements of the selector that you pass. See documents

It may help to see the responsible code.

So when I do this:

 $('.a').index('.b'); 

It will give you the index of the very first .a element in all .b elements .b .

It seems that you want it to be the opposite of what you have, so it’s possible:

 // Find '.ui-page' within the '[data-role=page]:not([data-url])' set: $('.ui-page').index('[data-role=page]:not([data-url])'); 

But note that this will only search for the first .ui-page element in elements that match the selector you passed to index(...) .