javascript - jQueryは各タブで最初のアコーディオンを選択します

Question

jQueryタブを使用するページがあります。各タブには、他のものに加えて、動的に生成される1つ以上の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タブ各選択されたタブ最初のテキストボックスフォーカス

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

The difference in my case is I have very little control over what content shows up in these tabs.

Answer 1

I'd suggest:

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

JS Fiddle proof-of-concept.

Answer 2

Try this:

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