Javascript 分别以相同类的多个实例为目标

我有这个密码

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

$（文档）.ready（函数（）{
$（'.tabular.tab'）.prependTo（$（'.tabular'））；
});

我在这个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
调味品。整尾猫
狮子座。例2
拍卖人fames pede sem。乌拉姆科珀罗恩库斯pharetra purus pellentesque
尼西。例3
罗博蒂斯·亨德雷特（Lobortis hendrerit）告诉我们，这是一场关于艾库利斯家族的斗争
纳勒姆。

但它只有在一个页面上只有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>

$（文档）.ready（函数（）{
$（'.tabular-1.tab-1'）.prependTo（$（'.tabular-1'））；
$（'.tabular-2.tab-2'）.prependTo（$（'.tabular-2'））；
$（'.tabular-3.tab-3'）.prependTo（$（'.tabular-3'））；
});

以及重新编写html和css。 是否有必要重新编写第一个脚本，这样我就不必每次添加选项卡式部分时都添加一行新代码？

---

通过查看jquery，我认为它涉及到添加索引和/或使用$（this），但我慢慢地了解了其中的含义

代码的问题是集合

$（'.tabular.tab'）

没有根据父元素对它们进行分组，因此

.prependTo（'.tabular'）

将移动页面上最后一个

.tabular

之前的所有选项卡（尊重文档顺序）

我最好的建议是使用

.each（）

迭代每个父级并移动其内部选项卡：

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

这使选项卡与其父选项卡“粘住”