Найти ближайший родственный с помощью JQuery

Question

Учитывая следующий DOM

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

Нам нужно найти ближайший <li> -элементные с data-id="1" к одному с данными идентификатором = «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>

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". Вы увидите первый li с data-id="1" получает класс, примененный к нему.

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/