Question

我有一个使用jQuery标签的页面。除了其他内容之外，每个选项卡还包含一个或多个动态生成的jQuery手风琴。例如：

<div id="tab1" class="tab">
    <div>
        Some stuff
    </div>
    <div class="accordion">
        I am an accordion
    </div>
</div>
<div id="tab2" class="tab">
    <div class="accordion">
        I am also an accordion
    </div>
    More stuff
    <div class="accordion">
        I am also an accordion
    </div>
</div>

我希望每个标签中的第一个手风琴保持打开状态，而其他手风琴（如果有的话）则会折叠。我试过了：

$('.tab .accordion:first')

只选择页面上的第一个手风琴（显然）。我也尝试过：

$('.tab .accordion:first-child')

这会在tab2中选择第一个手风琴，但它不会在tab1中选择一个，因为它上面有一些东西。我也试过了：

$('.tab > .accordion').filter(':first-child')
$('.tab').children('.accordion:first-child')

除了我能想到的每一种选择器组合。在这一点上，我的大脑被炒了。在你指出一个重复的问题之前，这些问题都没有完全提出同样的问题：

JQuery Tab each Selected tab first text box focus

jquery select first child with class of a parent with class

jQuery selector for each first element on every parent

jQuery Selecting the first child with a specific attribute

我的情况有所不同，我几乎无法控制这些标签中显示的内容。

Answer 1

我建议：

$('.tab').find('.accordion:first');

JS Fiddle proof-of-concept

Answer 2

试试这个：

 $('.accordion:first', '.tab')

jQuery在每个选项卡中选择第一个手风琴

2 个答案: