Skip to main content

Bug Tracker

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.

Attachments (0)
Change History (2)

Changed April 23, 2010 07:43PM UTC by rsinton comment:1

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>

Changed April 24, 2010 12:18AM UTC by dmethvin comment:2

resolution: → worksforme
status: newclosed

Yep, rsinton is right. Take a look at the

:nth-child
selector as well.