在特定列表项之后添加元素答案

【问题标题】：Add element after specific list item在特定列表项之后添加元素
【发布时间】：2021-08-15 15:40:59
【问题描述】：

我有一个这样设置的标签列表。所有选项卡都有一个类tab_<number>，活动选项卡还有一个额外的类tab_active

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

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

我要做的是在活动标签下方插入 div tab_content。

这有效，但仅在第二次单击选项卡时，我不明白为什么。

我尝试的第二个脚本是遍历不同的选项卡并尝试像这样插入 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>

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

非常感谢！

【问题讨论】：

标签： javascript html jquery css

【解决方案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>

【讨论】：