寻找下一个匹配兄弟姐妹的高效，简洁方法？

Question 1

坚持使用官方jQuery API，是否有更简洁但效率不低的方法来查找与给定选择器匹配的元素的下一个同级对象，而不是nextAll与:first伪类一起使用？

当我说官方API时，我的意思是不入侵内部结构，直接前往Sizzle，在组合中添加插件等。（如果我最终不得不这样做，那就是这样，但这不是这个问题。）

例如，鉴于此结构：

<div>One</div>
<div class='foo'>Two</div>
<div>Three</div>
<div class='foo'>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div class='foo'>Eight</div>

如果我有一个divin this（也许在click处理程序中，无论如何）并且想要找到与选择器“ div.foo”相匹配的下一个同级div，我可以这样做：

var nextFoo = $(this).nextAll("div.foo:first");

...并且可以正常工作（例如，如果我以“五个”开头，则跳过“六个”和“七个”并为我找到“八个”），但是它很笨拙，并且如果我要匹配任何一个中的第一个几个选择器，就会变得笨拙。（当然，这是一个很多更简洁比原始DOM循环将是...）

我基本上想要：

var nextFoo = $(this).nextMatching("div.foo");

...nextMatching可以接受所有选择器我总是很惊讶next(selector)没有这样做，但是没有这么做，并且文档清楚其功能，所以...

我总是可以编写并添加它，尽管如果这样做并坚持使用已发布的API，事情将会变得非常低效。例如，一个朴素的next循环：

jQuery.fn.nextMatching = function(selector) {
    var match;

    match = this.next();
    while (match.length > 0 && !match.is(selector)) {
        match = match.next();
    }
    return match;
};

...明显比慢nextAll("selector:first")。这不足为奇，nextAll可以将所有内容交给Sizzle，并且Sizzle已经过全面优化。上面的幼稚循环会创建并丢弃各种临时对象，并且每次都必须重新解析选择器，这并不奇怪，它很慢。

当然，我不能只:first在结尾处抛出：

jQuery.fn.nextMatching = function(selector) {
    return this.nextAll(selector + ":first"); // <== WRONG
};

...因为这将适用于“ div.foo”之类的简单选择器，但由于我提到的“多个选项”选项会失败，例如“ div.foo，div.bar”。

编辑：对不起，应该说：最后，我可以使用.nextAll()然后.first()对结果使用，但是jQuery将不得不访问所有同级对象以找到第一个。我希望它在获得比赛结果时停止，而不是浏览完整列表，这样它就可以丢弃除第一个以外的所有结果。（尽管它似乎发生得非常快；请参阅前面链接的速度比较中的最后一个测试用例。）

提前致谢。

Question 2

您可以将多重选择器传递给.nextAll()并使用.first()结果，如下所示：

var nextFoo = $(this).nextAll("div.foo, div.something, div.else").first();

编辑：只是为了比较，这里将它添加到测试套件中：http : //jsperf.com/jquery-next-loop-vs-nextall-first/2 这种方法非常快，因为它是处理以下内容的简单组合.nextAll()选择器关闭到本机代码时可能（每当前的浏览器），只是采取的第一个结果集的....方式比任何循环，你可以在JavaScript纯粹做得更快。

Question 3

如何使用该first方法：

jQuery.fn.nextMatching = function(selector) {
    return this.nextAll(selector).first();
}

Question 4

编辑，更新

使用下一个兄弟姐妹选择器（“上一个〜兄弟姐妹”）

jQuery.fn.nextMatching = function nextMatchTest(selector) {
     return $("~ " + selector, this).first()
};

http://jsperf.com/jquery-next-loop-vs-nextall-first/10

显示代码段

jQuery.fn.nextMatching = function nextMatchTest(selector) {
     return $("~ " + selector, this).first()
};
   var nextFoo = $("div:first").nextMatchTest("div.foo");
   console.log(nextFoo)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>One</div>
<div class='foo'>Two</div>
<div>Three</div>
<div class='foo'>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div class='goo'>Eight</div>

展开摘要

注意，尚未添加到比较测试中或尝试进行比较测试。不确定实际上是否比.nextAll()实施更有效。Piece尝试解析具有多个逗号分隔selector的的选择器字符串参数。返回.first()作为参数提供的单个或逗号分隔选择器的this元素，如果未selector提供参数，则返回element .nextMatchTest()。似乎在chrome 37处返回相同的结果，即11

v2

$.fn.nextMatching = function (selector) {
    var elem = /,/.test(selector) ? selector.split(",") : selector
    , sel = this.selector
    , ret = $.isArray(elem) ? elem.map(function (el) {
        return $(sel + " ~ " + $(el).selector).first()[0]
    }) : $(sel + " ~ " + elem).first();
    return selector ? $(ret) : this
};

显示代码段

$.fn.nextMatching = function (selector) {
    var elem = /,/.test(selector) ? selector.split(",") : selector
    , sel = this.selector
    , ret = $.isArray(elem) ? elem.map(function (el) {
        return $(sel + " ~ " + $(el).selector).first()[0]
    }) : $(sel + " ~ " + elem).first();
    return selector ? $(ret) : this
};

var div = $("div:first")
    , foo = div.nextMatching()
    , nextFoo = div.nextMatching("div.foo")
    , nextFooMultiple = div.nextMatching("div.foo, div.goo");
nextFooMultiple.css("color", "green");
nextFoo.css("color", "blue");
console.log(foo);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>One</div>
<div class='foo'>Two</div>
<div>Three</div>
<div class='foo'>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div class='goo'>Eight</div>

展开摘要