In jquery, there are three commands you can use to get the adjacent elements of an element:
Next (): Used to get the next sibling element.
Prev (): Used to get the previous sibling element.
Siblings (): Used to get all sibling elements.
This time we're going to get the sibling elements of the next element, including the former brother, the last brother, and the other brothers. In order to simplify the operation and to take into account daily use, we take only the sibling elements of the first element in the collection of elements.
1. This access control
$.fn._access = function () {
if (this.length) return Callback.call (this);
else return this;
};
The callback is only executed when the element set is longer than 0, otherwise this is returned. We have agreed that the underline starts with the method, the property is private, and the private property.
2, Prev, a former brother
/**
* Gets the previous sibling element of the current element
* @return New This
* @version 1.0
* December 29, 2013 2:06:02
*/
$.fn.prev = function () {
Return this._access (function () {
return $ (this[0].previouselementsibling);
});
};
3, Next, the last brother
/**
* Gets the last sibling element of the current element
* @return New This
* @version 1.0
* December 29, 2013 2:06:02
*/
$.fn.next = function () {
Return this._access (function () {
return $ (this[0].nextelementsibling);
});
}
4, siblings, other brothers
/**
* Gets the collection of sibling elements of the current element
* @param {String} selector selector, can be empty
* @return New This
* @version 1.0
* December 29, 2013 2:14:20
*/
$.fn.siblings = function (selector) {
Return this._access (function () {
var element = This[0],
Children = Element.parentElement.children,
ret = [],
I
This.each.call (Children, function () {
if (!this.isequalnode (element)) {
if (selector) {
_matchesselector (this, selector) && Ret.push (this);
else Ret.push (this);
}
});
return $ (ret);
});
};
There are 2 different ways to get the other sibling elements of an element:
In turn, the element's first sibling array is obtained, then reversed, and then the latter sibling element is obtained;
Gets the child element of the element's parent, and then iterates through it, dropping the current element.
Here is the 2nd method, where jquery is the 1th choice.
Example
<! DOCTYPE html>
<style>
Div,span {
Display:block;
width:80px;
height:80px;
margin:5px;
Background: #bbffaa;
Float:left;
font-size:14px;
}
Div#small {
width:60px;
height:25px;
font-size:12px;
Background: #fab;
}
</style>
<script src= "" > </script>
<body>
<div>div (doesn ' t match since before #prev) </div>
<span id= "prev" >span#prev</span>
<div>div sibling</div>
<div>div sibling <div id= "small" >div niece</div > </div>
<span>span sibling (not div) </span>
<div>div sibling</div>
<script>
~ the div that represents the id "Prem" has to change
$ ("#prev ~ div"). CSS ("Border", "3px Groove Blue");
+ Represents the id "prev" after the first div to be changed
$ ("#prev + div"). CSS ("Border", "3px Groove Blue");
</script>
</body>
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
