javascript - 分别针对相同类的多个实例

我有这个代码...

<script>
    $(document).ready(function () {
        $('.tabular .tab').prependTo($('.tabular'));
    });
</script>

我在这个HTML上使用

<div class="tabular"> <a class="tab">Example 1</a>

    <div class="tab_content">Ridiculus condimentum. Integer lacinia imperdiet felis morbi egestas dapibus
        leo.</div> <a class="tab">Example 2</a>

    <div class="tab_content">Auctor fames pede sem. Ullamcorper rhoncus pharetra purus pellentesque
        nisi.</div> <a class="tab">Example 3</a>

    <div class="tab_content">Lobortis hendrerit tellus maecenas pellentesque purus ante iaculis feugiat
        nullam.</div>
</div>

但是它仅在页面上只有1个选项卡式部分时才有效，如果我要在页面上有3个选项卡式部分，则必须将其重写为...

<script>
    $(document).ready(function () {
        $('.tabular-1 .tab-1').prependTo($('.tabular-1'));
        $('.tabular-2 .tab-2').prependTo($('.tabular-2'));
        $('.tabular-3 .tab-3').prependTo($('.tabular-3'));
    });
</script>

以及重新编写HTML和CSS。
无论如何，是否有必要重写第一个脚本，这样我每次添加选项卡式部分时都不必添加新的代码行？
从看jquery我认为它涉及添加索引和/或使用$（this），但我逐渐知道在哪里。

最佳答案

您的代码的问题在于，集合$('.tabular .tab')不会根据其父元素对它们进行分组，因此.prependTo('.tabular')会将所有选项卡移至页面上最后一个.tabular之前（遵循文档顺序）。

我最好的建议是使用.each()迭代每个父级并移动其内部选项卡：

$('.tabular').each(function() {
    $('.tab', this).prependTo(this);
});

这会使选项卡与其父级“保持一致”。