javascript - 使用 JQuery 制作 Bootstrap Accordion

Question

我正在尝试使用 JQuery(使用来自 API 的数据)制作 Bootstrap Accordion 结构。我几乎拥有了整个结构，但很难为内部内容添加一个额外的 div，它一直放在我的 anchor 标记内。我想制作如下所示的 HTML:

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-   
      parent="#accordion2" href="#collapseTwo">
       Collapsible Group Item #2
     </a>
   </div>
   <div id="collapseTwo" class="accordion-body collapse">
     <div class="accordion-inner">
   </div>
   </div>
  </div>

我的 JavaScript 看起来像这样(另外我还有一个全局计数器):

function makeAccordion(reposDatum) {
  var outerGroup = $("<div>").addClass("accordion-group");  
  var outerHeading = $("<div>").addClass("accordion-heading");
  var makeId =  "#collapse" + counter;
  var mainTitle = $("<a>").append(reposDatum.name);
  $(mainTitle).addClass("accordion-toggle").attr("data-toggle",   
   "collapse").attr("data-parent", "#accordion2").attr("href", makeId);
  var innerGroupShell = $("<div>").attr("id",  
    makeId).addClass("accordion-body").addClass("collapse").html("test");
  var innerGroupInner = $("<div>").addClass("accordion-inner");

  innerGroupShell.append(innerGroupInner);  
  mainTitle.append(innerGroupShell);
  outerHeading.append(mainTitle);
  outerGroup.append(outerHeading);

  return outerGroup;
}

我怀疑我需要使用 .after 或 .before 而不是 .append 但使用 .before 只是导致 div 消失。非常感谢任何想法。

Answer 1

https://jsfiddle.net/VixedS/L18fue2y/ 当然，我在 fiddle 中使用了一些示例数据。

function makeAccordion(reposDatum){
    counter++;
    $('.accordion-group').append(''+
      '<div class="accordion-heading">'+
      '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion'+(counter-1)+'" href="#collapse'+counter+'">'+
          reposDatum.name+
      '</a>'+
      '</div>'+
      '<div id="collapse'+counter+'" class="accordion-body collapse">'+
          '<div class="accordion-inner"></div>'+
      '</div>');
}