jquery,获得beetwen 2标签

时间:2016-06-05 17:45:02

标签: jquery dom-traversal

所以,我有这个

 $(".carpeta").click(function(){
    var elementos = $(this).nextUntil('ul.segunda').html();
    $('.doc-doc').html(elementos);
});

用那个

 <ul class="segunda"><span class="glyphicon glyphicon-folder-close "></span><span class="dime carpeta""></span>
    <li class="tercera">
        <span class="glyphicon glyphicon-file"></span>
        Example1
    </li>
    <li class="tercera">
        <span class="glyphicon glyphicon-file"></span>
        Example2
    </li>
    <ul class="segunda"><span class="glyphicon glyphicon-folder-close "></span><span class="dime carpeta""></span>

点击第一个ul我希望得到所有的东西,直到下一个ul与“.segunda”类,但我只有第一个li“example1”。

1 个答案:

答案 0 :(得分:1)

您的问题描述尚不清楚 对不起,我得说。

我无法弄清楚这些课程的用途:

  • .dime
  • .carpeta
  • .DOC-doc的

但我发现了.glyphicon 这最终给了我一个关于你该做什么的真实暗示:
(顺便说一句,谢谢你让我发现它!)

您想切换显示li s图标的显示.oO(还有什么?)
并且你可能想要在它打开时关闭它。

所以这是一个小脚本:

$(".glyphicon-folder-open, .glyphicon-folder-close").click(function(){

    // Toggle display of folder icons and lis
    $(this).parent().children("span.glyphicon, li.tercera").each(function(){
        var correctDisplay = "block";
        if( $(this).hasClass("glyphicon") ){    // Icon need to be inline-block
            correctDisplay = "inline-block";
        }
        if( $(this).css("display") == "none" ){
            $(this).css("display",correctDisplay);
        }else{
            $(this).css("display","none");
        }
    });
});

看看我的工作Fiddle

我为打开的文件夹添加了另一个glyphicon 我还添加了一个.description类......这可能是使用.carpeta ...

现在是您的HTML:

<ul class="segunda">
    <span class="glyphicon glyphicon-folder-close"></span>
    <span class="glyphicon glyphicon-folder-open"></span>
    <span class="description"> Numbers</span>
    <li class="tercera">
        <span class="glyphicon glyphicon-file"></span>
        Example 1
    </li>
    <li class="tercera">
        <span class="glyphicon glyphicon-file"></span>
        Example 2
    </li>
    <li class="tercera">
        <span class="glyphicon glyphicon-file"></span>
        Example 3
    </li>
    <li class="tercera">
        <span class="glyphicon glyphicon-file"></span>
        Example 4
    </li>
</ul>
<ul class="segunda">
    <span class="glyphicon glyphicon-folder-close"></span>
    <span class="glyphicon glyphicon-folder-open"></span>
    <span class="description"> Letters</span>
    <li class="tercera">
        <span class="glyphicon glyphicon-file"></span>
        Example A
    </li>
    <li class="tercera">
        <span class="glyphicon glyphicon-file"></span>
        Example B
    </li>
    <li class="tercera">
        <span class="glyphicon glyphicon-file"></span>
        Example C
    </li>
</ul>
<br>

还有一些CSS:

.tercera{
    display:none;
}
.glyphicon-folder-open{
    display:none;
}
.glyphicon{
    padding:6px 6px 0 0;
}
li{
    padding:0 0 0 10px;
}



关于.doc-doc最后的想法

因为我有一种感觉告诉我这将是你的下一个问题...... 如果您想在div某处显示文档内容,请执行li点击:
寻找Ajax。