使用 jQuery 查找最近的兄弟姐妹

Question

给定以下 DOM

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

我们需要找到与 data-id="3"最接近的<li>-Elementdata-id="1"

我们尝试了：

$('[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>