查找 DOM 中稍后出现的下一个元素

Question

在 javascript 中可能更好，但这肯定可以包括 jQuery 或任何此类库。

我想.next在下面的例子中找到第一个。

有很多类似问题的答案暗示nextAll或siblings......两者在这里都没用：

$(function(){
  $('.result').text(
    $('.origin').nextAll('.next').text()
      || $('.origin').siblings('.next').text()
      || 'both failed'
  )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="whatever">
  <p class="result"></p>
  <p class="origin">1</p>
</div>
<p class="next">2</p>
<p class="next">3</p>

此外，什么是最兼容（浏览器和库明智）和最高效（速度和更少的代码行）的方式来做到这一点？

Answer 1

基于该真棒答案由@mrtsherman，我写了这个更完整的解决方案，并测试它在Chrome和Safari的工作：

$(function() {
  $('.result').text(
    $('.origin').below('.next').text()
  );
});

(function($) {
  $.fn.below = function(sel) {
    var $result = $(sel).first();
    if ($result.length <= 0) {
      return $result;
    }
    $result = [];
    var thisIndex = $('*').index($(this));
    var selIndex = Number.MAX_VALUE; // Number.MAX_SAFE_INTEGER is not yet fully supported
    $(sel).each(function(i, val) {
      var valIndex = $('*').index($(val));
      if (thisIndex < valIndex && valIndex < selIndex) {
        selIndex = valIndex;
        $result = $(val);
      }
    });
    return $result;
  };
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="whatever">
  <p class="result"></p>
  <p class="origin">1</p>
</div>
<p class="next">2</p>
<p class="next">3</p>

我可能会尝试在 jQuery lib 上为此提交 PR，因为我相信......

这应该是 jQuery 的核心方法！:P

事实上，我只是对 this进行了一个非常简单的测试，它的表现甚至比nextAll这个简单的例子还要好。几乎快两倍！:o