cari

Rumah >hujung hadapan web >tutorial js >jquery中prev、next和siblings选择器实例展示

jquery中prev、next和siblings选择器实例展示

巴扎黑
巴扎黑asal
2017-06-22 14:34:071847semak imbas

在js中prev、next和siblings三个方法是指上一个，下一个及其他兄弟，下面我们一起来看看jquery中DOM元素的prev、next和siblings例子，有兴趣的和小编学学。

jquery里我们要获取某个元素的相邻元素时，可以用到的命令有三个：

next():用来获取下一个同辈元素。
prev():用来获取上一个同辈元素。
siblings()：用来获取所有的同辈元素。

这次我们来获取下元素的兄弟元素，包括前一个兄弟、后一个兄弟以及其他兄弟。为了简化操作，也考虑到日常使用，我们只取元素集合中的第一个元素的兄弟元素。

1、this访问控制

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

只在当元素集合长度大于0的时候才执行回调，否则返回this。我们约定，下划线开始的对方法、属性为私有方法、私有属性。

2、prev，前一个兄弟

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

3、next，后一个兄弟

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

4、siblings，其他兄弟

/**
 * 获取当前元素的兄弟元素集合
 * @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);
    });
};

获取元素的其他兄弟元素，有2种方法：

依次获得元素的前一个兄弟元素数组，然后反转，再依次获得元素的后一个兄弟元素；
获得元素的父级的子元素，然后遍历一次，除去当前元素。
这里选择的是第2种方法，其中jquery是选择的第1种。

例子

<!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>

Atas ialah kandungan terperinci jquery中prev、next和siblings选择器实例展示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：有关jquery中的遍历函数siblings()其用法详解Artikel seterusnya：jQuery中first()方法用法实例

Artikel berkaitan

Lihat lagi