jquery - 使用 jQuery 查找最近的 sibling

Question

给定以下 DOM

<ul>
     <li data-id="1">
     <li data-id="2">
     <li data-id="3">
     <li data-id="1">
</ul>

我们需要找到最接近的<li> - 具有 data-id="1" 的元素到 data-id="3"

的那个

我们尝试过:

$('[data-id=3]').siblings('[data-id=1]').first()

这当然会返回 DOM 中的第一个，而不是最近的

我们也尝试过:

$('[data-id=3]').closest('[data-id=1]')

这不起作用，因为它只是返回祖先。

感谢您的任何提示。

Answer 1

使用nextUntil()和 prevUntil()您可以计算哪个方向有最近同级，然后确定是否使用next()或prev()

var nextLength = $('[data-id="3"]').nextUntil('[data-id="1"]').length;
var prevLength = $('[data-id="3"]').prevUntil('[data-id="1"]').length;
var closestSibling;
if (nextLength > prevLength) {
  closestSibling = $('[data-id="3"]').prev('[data-id="1"]');
} else {
  closestSibling = $('[data-id="3"]').next('[data-id="1"]');
}
console.log(closestSibling.text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul>
  <li data-id="1">second closest</li>
  <li data-id="2"></li>
  <li data-id="3"></li>
  <li data-id="1">first closest</li>
</ul>