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

Question

I have dynamically created bootstrap accordions containing dynamically created groups in each. I want to add the in class to the first group in each accordion, which opens it as you can see in the linked bootstrap example.

<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>
...

There can be any number of .panel.panel-default which can contain any number of .panel-collapse.collapse

Here is what I have tried, as well as some other variations, to add the in class to the first .panel-collapse.collapse of each .panel.panel-default but I keep ending up with it adding the class to each one and not just the first.

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

Any help will be appreciated!

Answer 1

You need to iterate the panel-group , because I think what you are trying to do is to expand the first item in each accordion

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

Demo: Fiddle

Answer 2

Simply add this:

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

It works for me.