JQuery reference instance 2.3 is selected based on the index order of the elements

Source: Internet
Author: User

This article is translated from the jQuery Cookbook (O 'Reilly 2009) 2.3 Selecting Elements by Index Order requirement. Based on the selection target, we can select one of the following filters for implementation-in jQuery we call it a "filter", although they look similar to CSS pseudo classes:: first matches the first element: last matches the last element: even matches all elements with an even index value (the index value starts from 0 ): odd matches all the elements whose index values are odd (index values start from 0): the element whose eq (n) matches the index value is n: lt (n) match all the elements whose index value is less than n: gt (n) matches all the elements whose index value is greater than n. The following HTML snippet is used as an example: <ol> <li> First item </li> <li> Second item </li> <li> Third item </li> <li> Fourth item </li> </ol> there are several different ways to select the first element in the list: jQuery ('ol li: first '); jQuery ('ol li: eq (0)'); jQuery ('ol Li: lt (1) '); eq () and lt () filters both accept a number as the parameter, because the index value starts from 0, therefore, the index value of the first element is 0, while that of the second element is 1. Rendering rows in a table with different styles is a common requirement, which can be achieved using the even and odd filters. For the following table code: <table> <tr> <td> 0 </td> <td> even </td> </tr> <td> 1 </td> <td> odd </td> </tr> <td> 2 </td> <td> even </td> </tr> <td> 3 </td> <td> odd </td> </tr> <td> 4 </td> <td> even </td> </tr> </ table> you can add the class Attribute Based on the index value of the row in the table: jQuery ('tr: even '). addClass ('even'); to display the rendering effect, you need to define the corresponding class (even) in the CSS style sheet: table tr. shows the final effect of even {background: # CCC;}: As mentioned earlier, the index value of an element starts from 0. Except that the index value of the first element is 0, the use of the filter is very simple and clear. Another thing worth noting is that the filter needs to match the element set. The index value is meaningful only when the Element Set exists. Therefore, the following selector does not work: jQuery (': even'); in fact, the preceding statement can be executed, but this is because jQuery corrected the error when interpreting the selector. If the required element set is undefined, jQuery uses this element set as all elements in the document by default. Therefore, the above selector can actually work because it is exactly the same as the following selector: jQuery ('*: even'); but in general, the left side of the filter is required for Matching Element sets. This element set can also be a defined jQuery object, such as jQuery ('ul li '). filter (': first'); the filter method runs on a defined jQuery object (li set. ---

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.