Question

我有这段代码......

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

但只有在页面上只有一个标签部分时它才有效。如果我想要一个页面上的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），但我知道在哪里慢。

Answer 1

您的代码存在的问题是，集合$('.tabular .tab')不会根据其父元素对其进行分组，因此.prependTo('.tabular')会在页面上的最后一个.tabular之前移动所有标签（文件顺序很荣幸。）

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

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

这使得标签与其父标签“粘在一起”。

单独定位相同类的多个实例

1 个答案: