Posted by & filed under Uncategorized.

About wangcui

wangcui wangcui has written 13 post in this blog.

转载至http://qianduanblog.com/post/yquery3-dom-elements-prev-next-and-siblings.html

1、this访问控制

  1. $.fn._access =function(){
  2. if(this.length)return callback.call(this);
  3. elsereturnthis;
  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. returnthis._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. returnthis._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. returnthis._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种方法:

  1. 依次获得元素的前一个兄弟元素数组,然后反转,再依次获得元素的后一个兄弟元素;
  2. 获得元素的父级的子元素,然后遍历一次,除去当前元素。

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

Leave a Reply

  • (will not be published)