jquery中prev、next和siblings选择器实例展示
程序员文章站
2022-05-19 12:54:02
...
在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'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>
以上就是jquery中prev、next和siblings选择器实例展示的详细内容,更多请关注其它相关文章!
上一篇: 基于asp.net的图标控件图
推荐阅读
-
jQuery 选择器用法实例分析【prev + next】
-
jquery中prev、next和siblings选择器实例展示
-
jQuery中prev ~ siblings选择器使用介绍
-
jQuery中first()选择器的基本介绍及实例展示
-
jquery中prev、next和siblings选择器实例展示
-
对jQuery中prev + next选择器的基本介绍及用法详解
-
对jQuery中prev + next选择器的基本介绍及用法详解
-
jQuery中first()选择器的基本介绍及实例展示
-
jQuery中prev ~ siblings选择器使用介绍
-
jQuery 选择器用法实例分析【prev + next】