在特定列表项后添加元素

Question

我有一个如下所示的选项卡列表。所有选项卡都有一个类tab_<number>，活动选项卡还有一个额外的类tab_active

在这些选项卡下面，有一个显示基于哪个选项卡处于活动状态的动态内容的

<div class="tab_content">xxx</div>

我想要做的是将

插入到活动选项卡下面。

这个方法有效，但只有在第二次单击选项卡时才有效，我不明白为什么。

我尝试的第二种脚本是循环不同的标签，并尝试像这样插入

，但这只对最后一个项目起作用，因为它只是进行循环。

/*
// I tried two solutions, this was my first
jQuery(".tabs li").click(function() {
  jQuery(".tab_content").insertAfter(jQuery(".tab_active"));
});
*/

// second
var i;

for (i = 0; i < jQuery('.tabs li').length - 1; i++) {
  jQuery(".tab_" + i).click(function() {
    jQuery(".tab_content").insertAfter(jQuery(".tab_" + i));

  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
  <li class="tab_0 tab_active"><a href="#">1</a></li>
  <li class="tab_1"><a href="#">2</a></li>
  <li class="tab_2"><a href="#">3</a></li>
  <li class="tab_3"><a href="#">4</a></li>
  <li class="tab_4"><a href="#">5</a></li>
</ul>
<div class="tab_content">xxx</div>

你们能看到我做错了什么吗？

非常感激！

- Jan

Answer 1

• 可以用以下方式来完成此操作。
• 需要注意的是，如果页面中有更多的tab_*元素，则根据需要更新选择器以更严格地防止选择意外的元素。

$("[class^=tab_]").click(function(){
  $(this).append($(".tab_content"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
    <li class="tab_0 tab_active"><a href="#">1</a></li>
    <li class="tab_1"><a href="#">2</a></li>
    <li class="tab_2"><a href="#">3</a></li>
    <li class="tab_3"><a href="#">4</a></li>
    <li class="tab_4"><a href="#">5</a></li>
</ul>

<div class="tab_content">xxx</div>

- Harsh Gundecha