jQuery .cousins()方法

时间:2013-09-21 03:08:59

标签: javascript jquery jquery-plugins

我最终会喜欢.cousins(selector=null, uplimiter=-1, upstart=1,excludeself=true),但我不知道插件是否可行。如果是,那么我希望那些作为参数对象传递。

更新 这是除excludeself部分之外的工作代码,该部分旨在丢弃作为上下文的子项的任何结果。

(function($) {
$.fn.cousins = function(selector,uplimit,upstart,excludeself) {
  upstart=upstart||1;
  uplimit=uplimit||-1;
  excludeself=arguments.length<4?true:excludeself;
  if (typeof selector==='object') {
    upstart=(typeof selector.upstart!=='undefined')?selector.upstart:upstart;
    uplimit=(typeof selector.uplimit!=='undefined')?selector.uplimit:uplimit;
    excludeself=(typeof selector.excludeself!=='undefined')?selector.excludeself:excludeself;
    selector=selector.selector;
  }
  var cousins=null;
  var upat=0;
  var at=this;
  var that=this;
  if (at.length===0) {
    console.log('r 1');
    return at;
  }
  var upstart_ct=upstart;
  while(at.length>0&&upstart_ct>0) {
    at=at.parent();upat++;
    console.log(at.attr('id'));
    upstart_ct--;
    if (at.length===0) {
      return at;
    }
  }
  console.log('checkiing...');
  while ((cousins===null||cousins.length===0)&&(upat<uplimit||uplimit==-1)) {
    at.each(function() {
      if (cousins!==null) {
        return false;
      }
      var items = $(this).find(selector);
      console.log('found:'+items.length);
      if (0) {// need to excludeself here
        items=items.filter(function(idx){
          var me=$(this);
          var ps=me.parents();
          if (ps.indexOf(that)) {//?? not going to work huh HALP
          }
        });
      }
      if (items.length!=0) {
        if (cousins===null) {
          console.log('assigning to cousins...');
          cousins=items;
          return false;
        }
      }
    });
    if (cousins!==null) {
      console.log('cousins.length'+cousins.length);
    }
    if (cousins) {
      break;
    }
    at=at.parent();upat++;
    console.log('going up...'+upat);
    console.log(at.attr('id'));
    if (at.length===0) {
      cousins=at;
      break;
    }
  }
  return cousins;
  }
})(jQuery);

之前我从未编写过jQuery插件,所以我需要帮助。

更新,这是html的一个例子:

.item
  .item-hdr
    .item-hdr-btn <<source
      .item-body-text-area <<an example of excludeself, do not return this in set
  .item-body
    .item-body-textarea <<target

所以我想说$('.item-hdr-btn').cousins('.item-body-textarea')并让它在爬上树时返回第一次出现的匹配。

2 个答案:

答案 0 :(得分:2)

(function ($) {
    $.fn.cousins = function(selector) {
        var $parents = this.parents();
        for (var i = 0; i < $parents.length; i++) {
            var $m = $parents.eq(i).siblings(), $c = $(), j = i;
            while (j !== -1) {
                $c = $m = $m.children();
                j--;
            }
            if ($c.length) {
                if (!selector) return $c;
                else return $c.filter(selector);
            }
        }
        return $();
    }
})(jQuery);

http://jsfiddle.net/nJre5/

编辑:我已经更新了方法,因此它可以接受所需的选项,请注意,如果要将原始元素添加到返回的内容,则默认情况下不需要添加excludeItself选项set,根据您使用的jQuery版本,您可以在返回的集合上调用.addBack().andSelf()方法。

(function ($) {
    $.fn.cousins = function (o) {
        var options = {
            selector: null,
            uplimiter: 0,
            upstart: 0,
        };
        $.extend(options, o);

        var $p = this.parents(), i = o.upstart, l = $p.length - (o.uplimiter + i);

        for (i; i < l; i++) {
            var $m = $parents.eq(i).siblings(), $c = '', j = i;
            while (j !== -1) {
                $c = $m = $m.children();
                j--;
            }
            if ($c.length) {
                if (o.selector) $c = $c.filter(o.selector);
                // Adding the previous collection to the set
                // so the .addBack() and .andSelf() methods can be called
                $c.prevObject = this;
                return $c;
            }
        }

        var _ = $(); _.prevObject = this; return _;
    }
})(jQuery);

用法:

$('selector').cousins({
    selector: 'element',
    upstart: 2,
    uplimiter: 0
}).addBack() // adding the previous selected elements to the collection
  .foo(); 

该方法的名称可能是其他内容,例如elementHuntermegaCousinspseudoCousins或其他内容。

答案 1 :(得分:2)

好吧,堂兄弟可以找到:

void function($) {
    $.fn.cousins = function(selector) {
        return this.parent().siblings().children(selector);
        //         ^ parent ^ uncles   ^ cousins
    };
}(jQuery);

修剪中间结果可以相当容易。

默认情况下,节点本身被排除在外,但您可以使用.andSelf()并将其恢复。