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

Question

给出以下 DOM

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

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

我们尝试过：

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

当然是 returns DOM 中的 第一个 而不是 最近的

我们也尝试过：

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

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

感谢任何提示。

Answer 1

要根据索引检索距离当前所选元素最近的 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 应用了 class。

Answer 2

使用nextUntil() and prevUntil() you can calculate which direction has the closest sibling and then determine whether to use next() or 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>

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);

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/

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

Find closest sibling using jQuery

jquery

dom

siblings

closest