有没有更花哨的方法可以在同一类中获得上一个项目

Is there a fancier way to get a previous item with the same class?

本文关键字：一类 项目 上一个 方法 有没有      更新时间：2024-01-06

我有这样的表行：

<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>

因此，如果我有一个点击处理程序：

$(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似乎总是有效的，但它是丑陋的，因为它选择了所有与该类匹配的前一项，并选择了它找到的第一项。

有比选项B更好的选项吗？

jQuery没有比选项B更好的功能了。长期以来，我一直认为这是一个缺失的功能，因为我也经常想要类似的功能。幸运的是，制作自己的方法并不太难： 
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));
}

对于CCD_ 2也可以这样做。

在您的示例中，而不是这样：

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

你会使用这个：

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

这里是prevFind()和nextFind()的一个实现，它使用了一些通用代码：

(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/

相关文章：