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中的 first 而不是最接近的

我们也尝试过：

$('[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"。您会看到第一个带有li的{{1}}获取应用该类的内容。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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查找最近的兄弟姐妹

4 个答案: