jquery Search Sibling Element method

jquery Search Sibling Element method _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Tags prev set background

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This example describes the jquery search sibling element approach. Share to everyone for your reference. The specific analysis is as follows:

1. Next () method

Used to search for a single sibling element immediately after each matching element, optionally specifying a selector to filter sibling elements as follows:

Copy Code code as follows:

Next ([selector])
$ ("P"). Next ("P"). CSS ("Color", "#FCF");

2. Nextall () method

Used to search for all sibling elements immediately following each matching element, optionally specifying a selector to filter sibling elements

Copy Code code as follows:

Nextall ([selector])
$ ("P"). Nextall (). CSS ("Color", "blue");

3. Nextutil () method

Used to get the sibling element immediately following each matching element until the element that matches the given selector, but not the element, is formatted as follows:

Copy Code code as follows:

Nextutil ([selector])

Instance:

Copy Code code as follows:

$ ("#div1"). Nextutil ("div"). CSS ("Border", "1px solid Red");

Set the border of all middle sibling elements with ID div1 to the end of the next DIV element to red

4. Prev () method

Used to search for a single sibling element immediately preceding each matching element, optionally specifying a selector to filter the sibling elements, in the following syntax format:

Copy Code code as follows:

Prev ([selector])

Instance:

Copy Code code as follows:

$ ("#div2"). Prev ("span"). CSS ("Color", "blue");

The font for a SPAN element immediately preceding the DIV2 element becomes blue.

5. Prevall () method

Used to search for all sibling elements before the current element, or you can specify a selector to filter sibling elements. The syntax format is as follows:

Copy Code code as follows:

Prevall ([selector])

6. Prevutil () method

Used to search all sibling elements before the current element until the matching element is encountered, the syntax is as follows:

Copy Code code as follows:

Prevutil ([selector])
$ ("#div2"). Prevutil ("input"). CSS ("Color", "red");

7. Siblings () method

Used to search for all sibling elements of each matching element, optionally specifying a selector to filter those sibling elements. The format is as follows:

Copy Code code as follows:

Siblings ([selector])
$ ("div"). Siblings (). CSS ("Color", "red");

Examples are as follows:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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 sibling elements of the specified element </title>
<script language= "javascript" type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#td1"). Next (). CSS ("Color", "red"); Set the font color for the next sibling element of the TD element
$ ("#td1"). Nextall (). CSS ("Border", "1px solid Blue");//Set a border on all sibling elements that follow the TD element
$ ("#td2"). Prev (). CSS ("Color", "#99c"); Set the font color for one of the preceding sibling elements of the TD element
$ ("#td2"). Prevall (). CSS ("Background", "#FCF");//Set background to all sibling elements before the TD element
$ ("#td3"). Siblings (). CSS ("Color", "#99F"); Sets the font color for the sibling elements of the specified element in the current realm
})
</script>
<body>

<table width= "637" height= "351" border= "1" >
<tr>
&LT;TD width= "id=" TD1 > Single room (live) </td>
&LT;TD width= "112" > Double room (not live) </td>
&LT;TD width= "134" > Deluxe Suite (live) </td>
&LT;TD width= "117" > Single room (live) </td>
&LT;TD width= > Deluxe Suite (not live) </td>
</tr>
<tr>
<td> single room (live) </td>
<td> Double room (not staying) </td>
&LT;TD id= "TD2" > Deluxe suite (not live) </td>
<td> single room (not live) </td>
<td> Deluxe Suite (not live) </td>
</tr>
<tr>
<td> single room (not live) </td>
<td> Double room (not staying) </td>
&LT;TD id= "TD3" > Deluxe Suite (live) </td>
<td> single room (live) </td>
<td> Deluxe Suite (not live) </td>
</tr>
<tr>
<td> single room (live) </td>
<td> Double Room (live) </td>
<td> Deluxe Suite (not live) </td>
<td> single room (not live) </td>
<td> Deluxe Suite (live) </td>
</tr>
<tr>
<td> single room (live) </td>
<td> Double room (not staying) </td>
<td> Deluxe Suite (live) </td>
<td> single room (live) </td>
<td> Deluxe Suite (not live) </td>
</tr>
</table>
</body>

The effect chart is as follows:

I hope this article will help you with your jquery programming.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More