選擇靠近另一個的列表元素

Question

我想選擇一個帶有class menu-item menu-item-depth-1的li項目，該項目查詢所有與class 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 -->

例如，如果我選擇1st depth-1元素，我只想查詢與1st depth-1接近的元素的width width depth-2。

Answer 1

嘗試這個：

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 ，則matches將為null而不是空的jQuery object

Answer 2

您將必須在單擊的li元素之后直接遍歷所有li元素，並在每次迭代時檢查class屬性。 當元素的類與單擊的元素類匹配時，請使用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，單擊li可以看到被選中的那個。

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