Javascript 选择与其他元素相邻的列表元素

我想选择一个具有类菜单项menu-item-depth-1的li项，该li项查询所有具有类菜单项menu-item-depth-2且靠近所选元素的元素。如果我使用类菜单项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。

尝试以下操作：

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

---

请注意，如果未找到匹配项，则匹配项将为null，并且不是空的jQuery对象

您必须在单击的li元素之后直接循环所有li元素，并在每次迭代中检查class属性。当元素的类与单击的元素类匹配时，使用return退出循环

您可以尝试以下操作：

HTML

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

这里有一个JSFIDLE来展示上面的示例，单击li以查看所选的

---

@艾迪：你面临什么问题？我想在depth-1中的另一个字段的基础上隐藏depth-2中的一些字段，但我不知道如何像在post@Eddy让我知道这是否有用？非常感谢你的帮助

$("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;
        }
    }
});