使用JQuery制作Bootstrap手風琴

Question

我正在嘗試使用JQuery（使用來自API的數據）制作Bootstrap手風琴結構。 我幾乎擁有整個結構，但我很難為內部內容添加額外的div，這會一直放在我的錨標簽內。 我想制作如下所示的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只是造成股利消失。 任何想法都非常感激。

Answer 1

https://jsfiddle.net/VixedS/L18fue2y/當然，我在小提琴中使用了一些示例數據。

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>');
}

Answer 2

代碼中有一個小錯誤。 添加文本的位置。 只是改變了的位置

*.html("test")*

請檢查以下代碼：

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");
  var innerGroupInner = $("<div>").addClass("accordion-inner").html("test");

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

  return outerGroup;
}