jQuery：nextEl = someEl.next（function（）{... return true / false;}）？

Question

如何获得满足某些条件/功能的最近的下一个元素？像：

nextEl = someEl.next(function() {... return true to return this from next() });

我不知道jQuery API中的.next（）方法支持函数作为参数。如果没有做一个while循环，有没有一些技巧可以这样写呢？

此外，我不想先选择所有元素，然后使用filter（） - 从性能的角度来看，这是次优的。

Answer 1

获取所有下一个元素using .nextAll()，然后use .filter()并返回条件的结果。当条件返回true时，元素将被保留。

然后将其缩小到the .first()匹配。

nextEl = someEl.nextAll().filter(function() {
    return ( someCondition );
}).first();

或者，如果测试了许多元素，并且您不想在所有这些额外时间运行条件，请在满足条件时使用.each()，然后return false;。这会使循环停止。

var nextEl;

someEl.nextAll().each(function() {
    if( someCondition ) {
        nextEl = this;  // reference the matched element
        return false;   // break the loop
    }
});

---

编辑：如果你不想选择 all 下一个元素，我会去原生，并使用while循环，类似于这样：

var nextEl = someEl[0];

while( nextEl = nextEl.nextSibling ) {
    if( someCondition ) {
        break;
    }
}

一旦条件满足，循环就会中断，最新的nextEl赋值将是你的元素。

如果从未满足条件，则循环将在元素用完时结束，nextEl将为null或undefined（我不记得是哪个）。< / p>

这应该是一种非常快速的方法。

---

修改

这是它的功能版本。它接受起始元素和运行测试的函数。然后它返回找到的匹配项，或undefined。

function nextMatch( el, func ) {
    while( el = el.nextSibling ) {
        if( func() ) {
            return el;
        }
    }
}

  // nextEl will contain the match, or "undefined"
var nextEl = nextMatch( someEl, function() {
    return (someTest);
});

var someOtherEl = nextMatch( someEl, function() {
    return (someOtherTest);
});

---

最后编辑：

我想我不妨把它变成插件：

(function( $ ) {
    $.fn.nextMatch = function( func ) {
        return this.map(function() {
            var el = this;
            while( el = el.nextSibling ) {
                if( el.nodeType === 1 && func.call( el ) ) {
                    return el;
                }
            }
        });
    }
})( jQuery );

var nextEl = someEl.nextMatch( function() {
    return (someTest);
});

所以现在它更像是一个jQuery类型的解决方案。您仍然应该有更好的性能，因为它不会获取所有下一个兄弟节点，并且while循环在找到匹配后仍然会中断。

Answer 2

试试这个：

nextEl = someEl.nextAll('.a').first().css('color', 'red');

在这种情况下，条件是它具有类a，并且它将颜色变为红色（仅作为指示符）。

看看它有效here。