javascript - 获取2个元素之间的元素

标签 javascript jquery html

我有这个html:

<div class="categories">
    <div class="list-group">
        <a class="root list-group-item" id="427" style="display: block;"><span class="glyphicon indent0 glyphicon-chevron-down"></span><span>Home</span></a>
        <a class="list-group-item first active" id="428" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Images</span></a>
        <a class="list-group-item child" id="431" style="display: none;"><span class="glyphicon indent2"></span><span>Sub category</span></a>
        <a class="list-group-item first" id="429" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Videos</span></a>
        <a class="list-group-item child" id="432" style="display: none;"><span class="glyphicon indent2"></span><span>Another sub</span></a>
        <a class="list-group-item first" id="430" style="display: block;"><span class="glyphicon indent1"></span><span>Documents</span></a>
    </div>
</div>

我需要做的是选择a.active之间的所有元素。 更好地解释一下; a.active 有一个 span.glyphicon ,其类为 indent1,因此我需要选择 indent1 之间的元素和下一个indent1

我尝试使用 jQuery 的 nextAll 函数,但无法使其正常工作:(

如有任何帮助,我们将不胜感激,

/r3plica

更新1

感谢 Arun,这是我现在可以运行的脚本:

$(".glyphicon", treeRoot).on('click', function (e) {
    e.stopPropagation();

    var $glyph = $(this);
    var $item = $glyph.parent();
    var indent = $item.find(".glyphicon").prop('className').match(/\b(indent\d+)\b/)[1];

    console.log($item[0].outerHTML);
    console.log(indent);

    if (indent != undefined) {
        var $children = $item.nextUntil("a:has(." + indent + ")");

        console.log($children[0].outerHTML);

        if ($glyph.hasClass("glyphicon-chevron-right")) {
            $glyph
                .addClass('glyphicon-chevron-down')
                .removeClass("glyphicon-chevron-right");

            if ($children != null) $children.show();
        } else {
            $glyph
                .addClass('glyphicon-chevron-right')
                .removeClass("glyphicon-chevron-down");

            if ($children != null) $children.hide();
        }
    }
});

最佳答案

尝试

$('.active').nextUntil('a:has(.indent1)')

动态确定缩进值

var $active = $('.active');
var indent = $active.find('.glyphicon').prop('className').match(/\b(indent\d+)\b/)[1];

var $nexts = $active.nextUntil('a:has(.' + indent + ')');
console.log($nexts)

演示:Fiddle

关于javascript - 获取2个元素之间的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20092015/

相关文章:

javascript - 正则表达式 Javascript 按前两个字符匹配字符串

javascript - 仅使用 jQuery 对当前元素进行悬停

JavaScript 将下拉菜单限制为输入中的数字

javascript - 单击鼠标时如何停止重复功能?

javascript - 如何让形状移动到鼠标位置并消失?

javascript - 您可以在链接到的页面上加载或执行 Javascript 吗?

javascript - Threejs,了解Raycaster相交的对象坐标

javascript - 使用 jquery 验证插件逐步验证

javascript - 如何让一个相对定位的 child 获得所有 parent 的高度

javascript - 循环遍历表并添加类