是否有更高级的方式来获得同一类的前一项？ [英] Is there a fancier way to get a previous item with the same class?

问题描述

我有这样的表格行：

<tr class="parent0 row3" data-parent="0">
   <td>...</td>
</tr>
<tr class="parent3 row7" data-parent="3">
   <td>...</td>
</tr>
<tr class="parent3 row12" data-parent="3">
   <td>...</td>
</tr>
<tr class="parent0 row8" data-parent="0">
   <td>...</td>
</tr>
<tr class="parent0 row9" data-parent="0">
   <td>...</td>
</tr>

所以，如果我有一个点击处理程序：

So if I have a click handler:

$(document).on({
   "click": function(){
      var parentId = $(this).data("parent");
      //get previous sibling:
      //OPTION A:
      var prevParentA = 
              $(this).prev("parent" + parentId); //works sometimes
      //OPTION B:
      var prevParentB = 
              $(this).prevAll("parent" + parentId).eq(0); //works all the time but ugly...
   }

}, "tr");

选项A 仅在直接上一项具有相同父项时有效，但是当不的情况下， prevParentA === [] 这是不所需的结果。

选项B 似乎总是有效，但丑陋因为它选择了所有之前匹配该类的项目并选择它找到的第一个。

Option A only works when the direct previous item has the same parent, but when that is not the case, prevParentA === [] which is not the desired result.
Option B always seems to work, but it is ugly in that it is selecting ALL of the previous items matching that class and selecting the 1st one it finds.

是否有比选项B 更好的选择？

推荐答案

jQuery没有比你的选项B更好的东西。我一直认为这是一个缺少的功能，因为我经常想要它也喜欢它。幸运的是，制作自己的方法并不难：

jQuery does not have something better than your option B. I've long thought this was a missing piece of functionality as I've regularly wanted something like it too. Fortunately, it's not too hard to make your own method:

jQuery.fn.prevFind = function(selector) {
    var elems = [];
    this.each(function(i, item) {
        while (item = item.previousSibling) {
            if (item.nodeType == 1) {
                if ($(item).is(selector)) {
                    elems.push(item);
                    break;
                }
            }
        }
    });
    return(this.pushStack(elems, "prevFind", selector));
}

对于 nextFind（）也可以这样做也。

在您的示例中，而不是：

In your example, instead of this:

$(this).prevAll("parent" + parentId).eq(0);

你会用这个：

$(this).prevFind("parent" + parentId)

---

而且，这里是 prevFind（）和 nextFind（）使用一些通用代码：

---

And, here's an implementation of both prevFind() and nextFind() that uses some common code:

(function($) {

    $.each({
        'prevFind' : 'previousSibling',
        'nextFind' : 'nextSibling'
    }, function(method, dir) {

        $.fn[method] = function (selector) {

            var elems = [];

            this.each(function(i, item) {
                while (item = item[dir]) {
                    if (item.nodeType == 1) {
                        if ( $.find.matches(selector, [item]).length ) {
                            elems.push(item);
                            break;
                        }
                    }
                }
            });

            return this.pushStack(elems, method, selector);
        };
    });

}(jQuery));

这是小提琴： http://jsfiddle.net/nDYDL/1/

这篇关于是否有更高级的方式来获得同一类的前一项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！