使用jQuery查找最近的兄弟元素

Question

以下是DOM结构示例：

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

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

我们已经尝试过：

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

当然，它返回的是在DOM中第一个而不是最接近的。

我们还尝试了：

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

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

感谢任何提示。

- Raphael Jeger

---

在这种情况下，您如何定义“最接近”？是指与当前元素最接近的索引吗？ - Rory McCrossan

你想要前面还是后面的兄弟节点？ - Sudharsan S

我实际上是指相对于起始点的最近元素，因此，如果起始点是data-id=3，则最后一个data-id=1更接近，如果起始点是data-id=2，则第一个data-id=1更接近。 - Raphael Jeger

@RoryMcCrossan 是的，你完全正确！ - Raphael Jeger

@RaphaelJeger 我为你添加了一个答案。 - Rory McCrossan

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>

- AmmarCSE

---

谢谢。您的解决方案最易读，因此我们将使用它。 - Raphael Jeger

Answer 2

要检索与当前选择的元素最接近的data-id="1"元素，您可以首先按其索引的接近程度对元素进行排序，然后获取第一个。请尝试以下操作：

var currentIndex = $('[data-id="3"]').index();
$('[data-id="1"]').sort(function (a, b) {
    var aDelta = Math.abs($(a).index() - currentIndex);
    var bDelta = Math.abs($(b).index() - currentIndex);
    return aDelta > bDelta;
}).first().addClass('foo');

.foo {
  color: #C00;
}

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

为了测试它是否起作用，请将选择器中的 data-id="3" 更改为 data-id="2"。您将看到第一个具有 data-id="1" 的 li 被应用了该类。

- Rory McCrossan

Answer 3

通过循环遍历同级元素并找到相对于当前元素索引的最小索引来获取最接近的即可，例如 $('[data-id=3]') ：

var mainIndex = $('[data-id=3]').index('li');
    var minDif = 999;
    var closestIndex = 0;

    $('[data-id=3]').siblings('[data-id=1]').each(function(index)

      if(Math.abs($(this).index('li') - mainIndex) < minDif)
      {
        minDif = Math.abs($(this).index('li') - mainIndex);
        closestIndex = $(this).index('li');
      }

    });


    $('[data-id]').eq(closestIndex);

- KAD

Answer 4

一个适合你需求的不错的简单jQuery插件是一个选择：

(function ( $ ) {

    $.fn.closestSiblingByIndex = function(selector) {
        var thisIndex = this.index();
        var siblings = this.siblings(selector).map(function(i,e){
            return {
                element: $(this),
                diff: Math.abs($(this).index() - thisIndex)
            }
        }).get().sort(function(a,b){return a.diff-b.diff;});
        if(siblings.length == 0){
            return $();
        }
        else{
            return siblings[0].element
        }
    };

}( jQuery ));

那么使用方法将会是，例如：

$("li[data-id='3']").closestSiblingByIndex("li[data-id='1']");
                    .css('background-color','red')

当然，在这个例子中将其更改为：

$("li[data-id='2']").closestSiblingByIndex("li[data-id='1']");
                    .css('background-color','green')

将突出显示其他li。

实时示例：http://jsfiddle.net/u4b8w9dg/1/

- Jamiec