JQuery peer element search method, jquery peer Element

Source: Internet
Author: User

JQuery peer element search method, jquery peer Element

This example describes jQuery's method for searching peer elements. Share it with you for your reference. The specific analysis is as follows:

1. next () method

Used to search for a single peer element that follows each matching element. You can also specify a selector to filter peer elements as needed. The syntax format is as follows:
Copy codeThe Code is as follows: next ([selector])
$ ("P"). next ("p" ).css ("color", "# FCF ");

2. nextAll () method

Used to search for all peer elements that follow each matching element. You can also specify a selector to filter peer elements as needed.
Copy codeThe Code is as follows: nextAll ([selector])
$ ("P" ).nextAll().css ("color", "blue ");

3. nextUtil () method

Used to obtain the peer element that follows each matching element until it matches the element of the given selector (but does not include this element). The format is as follows:
Copy codeThe Code is as follows: nextUtil ([selector])

Instance:Copy codeThe Code is as follows: $ ("# div1"). nextUtil ("div" ).css ("border", "1px solid red ");

Set the border of all the intermediate peer elements whose id is div1 to the end of the next div element to red.

4. prev () method

Used to search for a single peer element next to each matching element. You can also specify a selector to filter peer elements as needed. The syntax format is as follows:
Copy codeThe Code is as follows: prev ([selector])

Instance:Copy codeThe Code is as follows: $ ("# div2 "). prev ("span" ).css ("color", "blue"); the font of a span element next to the div2 element changes to blue.

5. prevAll () method

This interface is used to search all peer elements before the current element. You can also specify a selector to filter peer elements. The syntax format is as follows:
Copy codeThe Code is as follows: prevAll ([selector])

6. prevUtil () method

It is used to search all peer elements before the current element until the matching element is met. The syntax format is as follows:
Copy codeThe Code is as follows: prevUtil ([selector])
$ ("# Div2"). prevUtil ("input" ).css ("color", "red ");

7. siblings () method

It is used to search for all peer elements of each matching element. You can also specify a selector to filter these peer elements as needed. The format is as follows:
Copy codeThe Code is as follows: siblings ([selector])
$ ("Div" ).siblings().css ("color", "red ");

Example:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script src = "jquery-1.4.2.js" type = "text/javascript"> </script>
<Title> Search for peer elements of a specified Element </title>
<Script language = "javascript" type = "text/javascript">
$ (Document). ready (function (){
$ ("# Td1" ).next().css ("color", "red"); // set the font color for the next peer element of the td Element
$ ("# Td1" pai.nextall().css ("border", "1px solid blue"); // set borders for all peer elements behind the td Element
$ ("# Td2" 2.16.prev(2.16.css ("color", "# 99c"); // set the font color for a peer element before the td Element
$ ("# Td2" 2.16.prevall().css ("background", "# FCF"); // set the background for all peer elements before the td Element
$ ("# Td3" ..siblings().css ("color", "# 99F"); // set the font color for the peer element specified in the current field
})
</Script>
</Head>
<Body>
<H3 align = "center"> hotel room status table <Table width = "637" height = "351" border = "1">
<Tr>
<Td width = "115" id = "td1"> single-user <span> (occupied) </span> </td>
<Td width = "112"> double room <span> (unoccupied) </span> </td>
<Td width = "134"> deluxe suite <span> (occupied) </span> </td>
<Td width = "117"> single-user <span> (occupied) </span> </td>
<Td width = "125"> deluxe suite <span> (unoccupied) </span> </td>
</Tr>
<Tr>
<Td> Single Room <span> (occupied) </span> </td>
<Td> double room <span> (not staying) </span> </td>
<Td id = "td2"> deluxe suite <span> (unoccupied) </span> </td>
<Td> Single Room <span> (not occupied) </span> </td>
<Td> deluxe suite <span> (not staying) </span> </td>
</Tr>
<Tr>
<Td> Single Room <span> (not occupied) </span> </td>
<Td> double room <span> (not staying) </span> </td>
<Td id = "td3"> deluxe suite <span> (occupied) </span> </td>
<Td> Single Room <span> (occupied) </span> </td>
<Td> deluxe suite <span> (not staying) </span> </td>
</Tr>
<Tr>
<Td> Single Room <span> (occupied) </span> </td>
<Td> double room <span> (occupied) </span> </td>
<Td> deluxe suite <span> (not staying) </span> </td>
<Td> Single Room <span> (not occupied) </span> </td>
<Td> deluxe suite <span> (occupied) </span> </td>
</Tr>
<Tr>
<Td> Single Room <span> (occupied) </span> </td>
<Td> double room <span> (not staying) </span> </td>
<Td> deluxe suite <span> (occupied) </span> </td>
<Td> Single Room <span> (occupied) </span> </td>
<Td> deluxe suite <span> (not staying) </span> </td>
</Tr>
</Table>
</Body>
</Html>

As follows:

I hope this article will help you with jQuery programming.

Related Article

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.