Home > Developer > JavaScript
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
