Question

我动态创建了bootstrap accordions，其中包含每个动态创建的组。我想将in类添加到每个手风琴中的第一个组中，这将打开它，如链接的bootstrap示例中所示。

<div class="panel panel-default">
    <div class="panel-heading">
        <h6 class="panel-title">
            <a class="accordionToggle" data-toggle="collapse" data-parent="#dynamicId" href="#dynamicId">
                Title
            </a>
        </h6>
    </div>
    <div class="panel-collapse collapse" id="dynamicId">
        ...
    </div>
</div>
...

可以有任意数量的.panel.panel-default，其中可以包含任意数量的.panel-collapse.collapse

以下是我尝试过的，以及其他一些变体，将in类添加到每个.panel-collapse.collapse的第一个.panel.panel-default，但我一直在最后添加对每一个而不仅仅是第一个。

$(".panel.panel-default").each(function (index) {
    $(this).children(".panel-collapse.collapse:first").addClass("in");
});

$(".panel.panel-default").each(function (index) {
    $(this).find(".panel-collapse.collapse:first").addClass("in");
});

$(".panel.panel-default").each(function (index) {
    $(this).children(".panel-collapse.collapse").first().addClass("in");
});

任何帮助将不胜感激！

Answer 1

你需要迭代panel-group，因为我认为你要做的是扩展每个手风琴中的第一个项目

$(".panel-group").each(function (index) {
    $(this).children(".panel-collapse.collapse:first").addClass("in");
});

演示：Fiddle

Answer 2

只需添加：

$(document).ready(function(){
    $(".panel-collapse.collapse:first").addClass("in");
});

对我有用。

JQuery动态地将类添加到具有特定类的第一个元素

2 个答案: