Example display of prev, next and siblings selectors in jquery-JS Tutorial-php.cn

Example display of prev, next and siblings selectors in jquery

巴扎黑

Release： 2017-06-22 14:34:07

Original

1824 people have browsed it

The three methods prev, next and siblings in js refer to the previous, next and other brothers. Let’s take a look at the examples of prev, next and siblings of DOM elements in jquery. There are If you are interested, learn from the editor.

In jquery, when we want to get the adjacent elements of an element, there are three commands that can be used:

next(): used to get the next sibling element.
prev(): used to get the previous sibling element.
siblings(): Used to obtain all sibling elements.

This time we are going to get the brother elements of the next element, including the previous brother, the next brother and other brothers. In order to simplify the operation and take into account daily use, we only take the sibling elements of the first element in the element set.

1, thisAccess control

$.fn._access = function(){
 if (this.length) return callback.call(this);
 else return this;
};

Copy after login

The callback is only executed when the length of the element collection is greater than 0, otherwise this is returned. We agree that the pairs of methods and properties starting with an underscore are private methods and private properties.

2.prev, the previous brother

/**
 * 获取当前元素的前一个兄弟元素
 * @return new this
 * @version 1.0
 * 2013年12月29日2:06:02
 */
$.fn.prev = function() {
    return this._access(function() {
        return $(this[0].previousElementSibling);
    });
};

Copy after login

3.next, the next brother

/**
 * 获取当前元素的后一个兄弟元素
 * @return new this
 * @version 1.0
 * 2013年12月29日2:06:02
 */
$.fn.next = function() {
    return this._access(function() {
        return $(this[0].nextElementSibling);
    });
}

Copy after login

4.siblings, other brothers

/**
 * 获取当前元素的兄弟元素集合
 * @param {String} selector 选择器，可以为空
 * @return new this
 * @version 1.0
 * 2013年12月29日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);
    });
};

Copy after login

There are two ways to get the other sibling elements of an element:

Get the previous sibling element of the element in turnArray, then reverse it, and then get the last sibling element of the element in turn A sibling element;
Get the child elements of the element's parent, and then traverse once to remove the current element.
The second method is chosen here, among which jquery is the first method chosen.

Example

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div>div (doesn&#39;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> 
//　 ~ 代表id"prem"后面的div都要变 
$("#prev ~ div").css("border", "3px groove blue"); 
// + 代表id"prev"后面的第一个div要变 
$("#prev + div").css("border", "3px groove blue"); 
</script>
</body>
</html>

Copy after login

The above is the detailed content of Example display of prev, next and siblings selectors in jquery. For more information, please follow other related articles on the PHP Chinese website!