:eq() Selector

jQuery

previous page next page

:eq() Selector

Categories: Selectors > Basic Filter | Selectors > jQuery Extensions

eq selector

Description: Select the element at index n within the matched set.

  • version added: 1.0jQuery( ":eq(index)" )

    index: Zero-based index of the element to match.

  • version added: 1.8jQuery( ":eq(-index)" )

    -index: Zero-based index of the element to match, counting backwards from the last element.

The index-related selectors (:eq(), :lt(), :gt(), :even, :odd) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors.

Note that since JavaScript arrays use 0-based indexing, these selectors reflect that fact. This is why $('.myclass:eq(1)') selects the second element in the document with the class myclass, rather than the first. In contrast, :nth-child(n) uses 1-based indexing to conform to the CSS specification.

Prior to jQuery 1.8, the :eq(index) selector did not accept a negative value for index (though the .eq(index) method did).

Additional Notes:

  • Because :eq() is a jQuery extension and not part of the CSS specification, queries using :eq() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").eq(index) instead.

Examples:

Example: Finds the third td.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <table border="1">
                                    

                                  

                                  

                                    

                                        <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
                                    

                                  

                                  

                                    

                                        <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
                                    

                                  

                                  

                                    

                                        <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
                                    

                                  

                                  

                                    

                                      
                                        </table>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        $("td:eq(2)").css("color", "red");
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Apply three different styles to list items to demonstrate that :eq() is designed to select a single element while :nth-child() or :eq() within a looping construct such as .each() can select multiple elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <ul class="nav">
                                    

                                  

                                  

                                    

                                         <li>List 1, item 1</li>
                                    

                                  

                                  

                                    

                                         <li>List 1, item 2</li>
                                    

                                  

                                  

                                    

                                         <li>List 1, item 3</li>
                                    

                                  

                                  

                                    

                                      
                                        </ul>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <ul class="nav">
                                      
                                    

                                  

                                  

                                    

                                        <li>List 2, item 1</li>
                                    

                                  

                                  

                                    

                                        <li>List 2, item 2</li>
                                    

                                  

                                  

                                    

                                        <li>List 2, item 3</li>
                                    

                                  

                                  

                                    

                                      
                                        </ul>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      
                                        /* applies yellow background color to a single <li> */
                                      
                                    

                                  

                                  

                                    

                                      $("ul.nav li:eq(1)").css( "backgroundColor", "#ff0" );
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        /* applies italics to text of the second <li> within each <ul class="nav"> */
                                      
                                    

                                  

                                  

                                    

                                      $("ul.nav").each(function(index) {
                                    

                                  

                                  

                                    

                                        $(this).find("li:eq(1)").css( "fontStyle", "italic" );
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        /* applies red text color to descendants of <ul class="nav"> */
                                      
                                    

                                  

                                  

                                    

                                      
                                        /* for each <li> that is the second child of its parent */
                                      
                                    

                                  

                                  

                                    

                                      $("ul.nav li:nth-child(2)").css( "color", "red" );
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Add a class to List 2, item 2 by targeting the second to last <li>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      .foo {
                                    

                                  

                                  

                                    

                                        color: blue;
                                    

                                  

                                  

                                    

                                        background-color: yellow;
                                    

                                  

                                  

                                    

                                      
                                        }
                                      
                                    

                                  

                                  

                                    

                                      
                                        </style>
                                      
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <ul class="nav">
                                    

                                  

                                  

                                    

                                         <li>List 1, item 1</li>
                                    

                                  

                                  

                                    

                                         <li>List 1, item 2</li>
                                    

                                  

                                  

                                    

                                         <li>List 1, item 3</li>
                                    

                                  

                                  

                                    

                                      
                                        </ul>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <ul class="nav">
                                      
                                    

                                  

                                  

                                    

                                        <li>List 2, item 1</li>
                                    

                                  

                                  

                                    

                                        <li>List 2, item 2</li>
                                    

                                  

                                  

                                    

                                        <li>List 2, item 3</li>
                                    

                                  

                                  

                                    

                                      
                                        </ul>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      $( "li:eq(-2)" ).addClass( "foo" )
                                    

                                  

                                  

                                    

                                          </script>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page