小虎博客

A-A+

jquery中DOM元素的prev、next和siblings例子

2016年01月10日 编程技术 暂无评论

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

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

next():用来获取下一个同辈元素。

prev():用来获取上一个同辈元素。

siblings()：用来获取所有的同辈元素。

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

1、this访问控制

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

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

2、prev，前一个兄弟

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

3、next，后一个兄弟

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

4、siblings，其他兄弟

  1. /** 
  2.  * 获取当前元素的兄弟元素集合 
  3.  * @param {String} selector 选择器，可以为空 
  4.  * @return new this 
  5.  * @version 1.0 
  6.  * 2013年12月29日2:14:20 
  7.  */  
  8. $.fn.siblings = function(selector) {  
  9.     return this._access(function() {  
  10.         var element = this[0],  
  11.             children = element.parentElement.children,  
  12.             ret = [],  
  13.             i;  
  14.         this.each.call(children, function() {  
  15.             if (!this.isEqualNode(element)) {  
  16.                 if (selector) {  
  17.                     _matchesSelector(this, selector) && ret.push(this);  
  18.                 } else ret.push(this);  
  19.             }  
  20.         });  
  21.         return $(ret);  
  22.     });  
  23. };  

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

依次获得元素的前一个兄弟元素数组，然后反转，再依次获得元素的后一个兄弟元素；

获得元素的父级的子元素，然后遍历一次，除去当前元素。

这里选择的是第2种方法，其中jquery是选择的第1种。

例子:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. div,span {  
  6. 　 display:block;  
  7. 　 width:80px;  
  8. 　 height:80px;  
  9. 　 margin:5px;  
  10. 　 background:#bbffaa;  
  11. 　 float:left;  
  12. 　 font-size:14px;  
  13. }  
  14. div#small {  
  15. 　 width:60px;  
  16. 　 height:25px;  
  17. 　 font-size:12px;  
  18. 　 background:#fab;  
  19. }  
  20. </style>  
  21. <script src="" > </script>  
  22. </head>  
  23. <body>  
  24. <div>div (doesn't match since before #prev)</div>  
  25. <span id="prev">span#prev</span>  
  26. <div>div sibling</div>  
  27. <div>div sibling <div id="small">div niece</div > </div>  
  28. <span>span sibling (not div)</span>  
  29. <div>div sibling</div>  
  30. <script>   
  31. //　 ~ 代表id"prem"后面的div都要变   
  32. $("#prev ~ div").css("border", "3px groove blue");   
  33. // + 代表id"prev"后面的第一个div要变   
  34. $("#prev + div").css("border", "3px groove blue");   
  35. </script>  
  36. </body>  
  37. </html>  
标签：

给我留言