javascript - 使用 jQuery 查找 DOM 中最接近的下一个元素

Question

在下面的例子中。我想找到第一个.invalid-feedback和.valid-feedback对于这两项#main和#secondary .

显然我对一般情况感兴趣，这就是我为 jQuery 编写原型(prototype)扩展的原因。

$.fn.extend({
  closestNext: function (selector) {
    let found = null    
    let search = (el, selector) => {
      if (!el.length) return
      if (el.nextAll(selector).length) {
        found = el.nextAll(selector).first()
        return
      }
      search(el.parent(), selector)
    }

    search($(this), selector)
    return found
  }
})

// Proof
$('#main').closestNext('.invalid-feedback').text('main-invalid')
$('#secondary').closestNext('.invalid-feedback').text('secondary-invalid')
$('#main').closestNext('.valid-feedback').text('any-valid')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div>
        <input id="main"/>
    </div>
    <div class="dummy"></div>
    <div class="invalid-feedback"></div>
    <div>
        <input id="secondary"/>
    </div>
    <div class="invalid-feedback"></div>
</div>
<div class="valid-feedback"></div>

我写的看起来很复杂，我希望这种 DOM 遍历函数能够成为 jQuery 开箱即用的一部分。不幸的是，我在手册上没有找到任何相关的功能。

是否有更简单的方法来达到与 closestNext 相同的结果是吗？

编辑

从更算法的 Angular 来看，我正在寻找一个按以下顺序进行的树遍历函数，但其​​复杂性比我在示例中实现的要好。

.
├── A1
│   ├── B1
│   │   ├── C1
│   │   ├── C2
│   │   └── C3
│   ├── B2
│   │   ├── C4 <--- Entry point
│   │   ├── C5
│   │   └── C6
│   └── B3
│       ├── C7
│       ├── C8
│       └── C9
└── A2
    ├── B4 
    │   ├── C10
    │   └── C11
    └── B5
        ├── C12
        └── C13

来自C4入口点，探索顺序为:

>>> traverse(C4)
C5, C6, B3, C7, C8, C9, A2, B4, C10, C11, B5, C12, C13

Answer 1

我看不出你的初始代码如何变得更简单。毕竟，它需要迭代标记。

但我确实看到的是如何对其进行优化，使用 return 来支持 letfound = null 并仅调用 el.nextAll(selector )一次。

我还解决了找不到该元素的情况，就好像没有找到一样，最终会出现异常。

堆栈片段

$.fn.extend({
  closestNext: function (selector) {
    let search = (el, selector) => {
      if (!el.length) return el
      let f = el.nextAll(selector)
      return f.length ? f.first() : search(el.parent(), selector)
    }
    return search($(this), selector)
  }
})

// Proof
$('#main').closestNext('.invalid-feedback').text('main-invalid')
$('#secondary').closestNext('.invalid-feedback').text('secondary-invalid')
$('#main').closestNext('.valid-feedback').text('any-valid')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div>
        <input id="main"/>
    </div>
    <div class="dummy"></div>
    <div class="invalid-feedback"></div>
    <div>
        <input id="secondary"/>
    </div>
    <div class="invalid-feedback"></div>
</div>
<div class="valid-feedback"></div>