Выберите элементы списка рядом с другим

Question

Я хочу выбрать элемент li с классом menu-item menu-item-depth-1, который запрашивает весь элемент с классом menu-item menu-item-depth-2, которые находятся рядом с выбранным элементом. Если бы я достичь другого элемента с классом menu-item menu-item-depth-1 мой запрос останавливается:

<li class="menu-item menu-item-depth-0"></li> 
<li class="menu-item menu-item-depth-0"></li> 
<li class="menu-item menu-item-depth-1"></li><! -- 1st depth-1 element --> 
<li class="menu-item menu-item-depth-2"></li><! -- close element to 1st depth-1 --> 
<li class="menu-item menu-item-depth-2"></li><! -- close element to 1st depth-1 --> 
<li class="menu-item menu-item-depth-2"></li><! -- close element to 1st depth-1 --> 
<li class="menu-item menu-item-depth-2"></li><! -- close element to 1st depth-1 --> 
<li class="menu-item menu-item-depth-1"></li><! -- 2nd depth-1 element --> 
<li class="menu-item menu-item-depth-2"></li><! -- not close element to 1st depth-1 --> 
<li class="menu-item menu-item-depth-2"></li><! -- not close element to 1st depth-1 --> 
<li class="menu-item menu-item-depth-2"></li><! -- not close element to 1st depth-1 --> 
<li class="menu-item menu-item-depth-2"></li><! -- not close element to 1st depth-1 --> 

Например, если выбрать 1-й глубины 1 элемент, я хочу, чтобы запросить только ширина элемента глубины 2, которые близки элемент 1 depth- 1.

Answer 1

Вы придется перебирать все li элементов сразу после щелчка на элементе li и проверить атрибут класса на каждой итерации. Когда класс элемента совпадает с классом элемента clicked, используйте return для выхода из цикла.

Вы можете попробовать следующее:

HTML

<ul> 
    <li class="menu-item menu-item-depth-0">0</li> 
    <li class="menu-item menu-item-depth-0">0</li> 
    <li class="menu-item menu-item-depth-1">1</li> 
    <! -- 1st depth-1 element --> 
    <li class="menu-item menu-item-depth-2">2</li> 
    <! -- close element to 1st depth-1 --> 
    <li class="menu-item menu-item-depth-2">2</li> 
    <! -- close element to 1st depth-1 --> 
    <li class="menu-item menu-item-depth-2">2</li> 
    <! -- close element to 1st depth-1 --> 
    <li class="menu-item menu-item-depth-2">2</li> 
    <! -- close element to 1st depth-1 --> 
    <li class="menu-item menu-item-depth-1">1</li> 
    <! -- 2nd depth-1 element --> 
    <li class="menu-item menu-item-depth-2">2</li> 
    <! -- not close element to 1st depth-1 --> 
    <li class="menu-item menu-item-depth-2">2</li> 
    <! -- not close element to 1st depth-1 --> 
    <li class="menu-item menu-item-depth-2">2</li> 
    <! -- not close element to 1st depth-1 --> 
    <li class="menu-item menu-item-depth-2">2</li> 
</ul> 

Javascript:

$("ul li").click(function() { 
    // reset background for example 
    $(".menu-item").css("background", "#fff"); 

    $this = $(this); 
    var clickedClass = $this.attr('class').split(' ').pop(); 
    var nextNumber = parseInt(clickedClass.replace("menu-item-depth-", "")) + 1; 

    var nextElements = $this.nextAll(); 
    for (var i = 0; i < nextElements.length; i++) { 
     var $element = $(nextElements[i]); 
     if ($element.hasClass("menu-item-depth-" + nextNumber)) { 
      $element.css("background-color", "green"); 
     } else if ($element.hasClass(clickedClass)) { 
      return; 
     } 
    } 
}); 

Вот jsfiddle, чтобы продемонстрировать пример выше, нажмите на Ли, чтобы увидеть те выбирают ,

http://jsfiddle.net/1kamsz05/1/

Answer 2

попробовать это:

function getNextClose(selector, selector2) 
{ 

    var matches = null, next = jQuery(selector).next(); 
    while (!next.is(selector) && next.is(selector2)) 
    { 
     if (!matches) matches = next; 
     else matches = matches.add(next); 
     next = next.next(); 
    } 
    return matches; 
} 

использовать так:

var matches = getNextClose('.menu-item.menu-item-depth-1:first', '.menu-item.menu-item-depth-2'); 

Примечание что, если совпадений не найдено matches будет null и не пустой jQuery object