Side navigation
#6474 closed bug (worksforme)
Opened April 23, 2010 08:01AM UTC
Closed April 24, 2010 12:18AM UTC
strange behavior of has() and eq()
| Reported by: | mitallast@gmail.com | Owned by: | |
|---|---|---|---|
| Priority: | Milestone: | 1.4.2 | |
| Component: | selector | Version: | 1.4.2 |
| Keywords: | eq, has | Cc: | |
| Blocked by: | Blocking: |
Description
some code html:
<select name="1">
<option>0</option>
<option>1</option>
</select>
<select name="2">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<select name="3">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
I expect, that query
$('select:has(option:eq(2))')
return select[name=2] and select[name=3], but returned nothing.
But query
$('select').has('option:eq(2))')
return only select[name=2].
It's like as "has" selector find all options, instead of options in current select as in find function.
Not a bug.
:eq(n) doesn't do what you're expecting: it selects element n from an array of results -- check the docs for more details.
What you want is
$('select:has(option:contains(2))').Your second example is working correctly, in that it finds the third option element in the document ( eq(2), because the array is zero-indexed), then returns the select element that does contain that option element.
Some examples to clarify:
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script> <script type="text/javascript"> $( document ).ready( function() { alert( $( 'select:has(option)' ).text() ); // 'a b c d e f g h i' alert( $( 'option:contains(c)' ).text() ); // 'c' alert( $( 'select:has(option:contains(c))' ).text() ); // 'c d e' alert( $( 'select' ).has( 'option:eq(4)' ).text() ); // 'c d e' alert( $( 'select' ).has( 'option:eq(5)' ).text() ); // 'f g h i ' }); </script> </head> <body> <select name="1"> <option>a</option> <option>b</option> </select> <select name="2"> <option>c</option> <option>d</option> <option>e</option> </select> <select name="3"> <option>f</option> <option>g</option> <option>h</option> <option>i</option> </select> </body> </html>