1

我有这个代码...

<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) 但我慢慢知道在哪里。

4

1 回答 1

2

您的代码的问题是该集合$('.tabular .tab')没有根据它们的父元素对它们进行分组，因此.prependTo('.tabular')会将所有选项卡移动.tabular到页面上最后一个之前的所有选项卡（尊重文档顺序）。

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

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

这使得标签“粘”在它们的父级上。

于 2013-08-30T09:58:24.220 回答