使用 jquery 在 dom 的其余部分中查找特定元素之后的第一个匹配项

Question

嗨，我必须在特定 div 之后在 dom 结构中找到“findme”div 并使用一个 Jquery 找到 div 之后的第一个实例。 以下可能是dom结构：

ex1:
<div class="abc"></div>
<div class="findme"></div>

ex2:
<div class="abc"></div>

 <div>
   <div class="findme"></div>
</div>

 ex3:
 <div>
   <div class="abc"></div>
 </div>
 <div>
   <div class="findme"></div>
</div>

 ex4:
 <div>
   <div class="abc"></div>
 </div>
  <div class="findme"></div>

以上是 dom 结构的一些示例，我想在其中使用 jquery 在“abc”div 之后首先找到“findme”div 我尝试使用after(),closest().nextAll().first() 但我没有得到与所有示例匹配的查询。 所以请任何人都可以帮我在“abc”div之后找到div第一个元素（“finme”）

我想在 "abc" div 之后的完整 dom 中找到下一个 "findme" div，上面的 "abc" div 之后第一次出现是 dom 可以是的一些示例

Answer 1

我能找到让它适用于所有情况的唯一方法是使用过滤器按顺序遍历整个 DOM：

var foundAbc;
$('*').filter(function() {
  if ($(this).hasClass('abc')) {
    foundAbc = true;
  } else {
    if (foundAbc && $(this).hasClass('findme')) {
      foundAbc = false;
      return true;
    }
  }
  return false;
}).css('color','red');

JSFiddle: https://jsfiddle.net/TrueBlueAussie/LnLf79od/2/

如果您想使其可重用，您可以将此行为包装在 jQuery 扩展方法中。

$.findNext = function(selector1, selector2) {
  var foundAbc;
  return $('*').filter(function() {
    if ($(this).is(selector1)) {
      foundAbc = true;
    } else {
      if (foundAbc && $(this).is(selector2)) {
        foundAbc = false;
        return true;
      }
    }
    return false;
  });
}

并像这样使用：

$.findNext('.abc', '.findme').css('color', 'red');

JSFiddle： https://jsfiddle.net/TrueBlueAussie/LnLf79od/3/