jquery - 将基于 CLASS 的标签附加到特定的 ID 容器

Question

我是一名具有 HTML/CSS 知识的设计师，但我是 jQuery 新手。

我已经成功地制作了一个简单的手风琴作品，但我需要帮助用数据库中的内容填充它。我有一个项目列表，其中分配了一个组，我需要为每个组创建一个选项卡。

我使用数据库中组的名称作为容器的 ID 和每个项目的类，以便“链接”它们。我做了一个这样的演示工作：

HTML

<div id="accordion">
  <h3>GROUP 1</h3>
  <div class="gr" id="group1">
    <ul></ul>
  </div>
  <h3>GROUP 2</h3>
  <div class="gr" id="group2">
    <ul></ul>     
  </div>
</div>

<ul>
  <li class="group1">Item A</li>
  <li class="group2">Item B</li>
  <li class="group1">Item C</li>
  <li class="group2">Item D</li>
</ul>

jQuery

$(document).ready(function(){
    $(".group1").appendTo($("#group1 ul"));
    $(".group2").appendTo($("#group2 ul"));
});

对于未定义数量的未知名称的项目和组，我怎样才能获得相同的结果？

非常感谢！！

标签： jquery

Answer 1

解决了！

$(document).ready(function(){
  $(".gr").each(function() {
    const group = $(this).attr("id");
    $("." + group).appendTo("#" + group + " ul");
  });
});