jquery,获取2个标签之间的所有内容

标签 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”。

最佳答案

你的问题描述很不清楚。
抱歉,我不得不说。

我不知道这些类的用途:

  • .一毛钱
  • .carpeta
  • .doc-doc

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

您想要切换图标的 li 的 onclick 显示..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 .

我为打开的文件夹添加了另一个字形。
我还添加了一个 .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。

关于jquery,获取2个标签之间的所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37644941/

相关文章:

javascript - 如何使用 jQuery .each() 处理空对象?

javascript - 为了获得良好的 SEO,我应该避免哪些 javascript 做法

jquery - 在将 z-index 设置为 -1 时,Bootstrap Carousel 控件无法单击

javascript - querySelectorAll和getElementsBy *方法返回什么?

javascript - 使用 jquery 一次选择一个元素

javascript - 使用 jQuery 和/或 javascript 检索页面上的所有斜体文本片段

javascript - querySelectorAll 和 getElementsBy* 方法返回什么?

javascript - 单击功能仅适用于我中继器中的第一个项目,为什么?

javascript - 我想从ckeditor动态获取数据到div

javascript - 动态添加 div 会导致奇怪的样式共享