使用Javascript在另一個div內部安排div

Question

所以如果你有空閑時間：

這是一個非常復雜的事情，或者我太天真了，因為我已經工作了幾個小時沒有得到所需的輸出/結果，我希望你能幫助我，如果你有空閑時間。

首先，這是我擁有的數據，它是從PHP新聞源中檢索的，因此不是靜態的項目數：

<span class="dateclass">date1</span>
<span class="dateclass">date2</span>
<span class="dateclass">date3</span>
....and so on
<br>
<div class="contentclass">content1</div>
<div class="contentclass">content2</div>
<div class="contentclass">content3</div>
....and so on

我需要使用類和ID，因為沒有php模板引擎所以我不能調用單個元素，代碼分布在幾個文件中，更容易實現我需要的方法是通過javascript和他們的ID /類

我需要通過復制上面的數據獲得以下輸出，並使用Javascript調整數據以獲得最終結果，這應該是：

<div class="frame">
  <div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>
  <span class="timeline-date"> <span class="dateclass">date1</span> </span>
  <div class="timeline-content"> <div class="contentclass">content1</div> </div>
</div>
<div class="frame">
  <div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>
  <span class="timeline-date"> <span class="dateclass">date2</span> </span>
  <div class="timeline-content"> <div class="contentclass">content2</div> </div>
</div>
<div class="frame">
  <div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>
  <span class="timeline-date"> <span class="dateclass">date3</span> </span>
  <div class="timeline-content"> <div class="contentclass">content2</div> </div>
</div>

<div class="timeline-badge"> <i class="fa fa-twitch"></i> </div>那些不作為數據存在以便“轉換”，但那些是風格，我也需要它們，但我還沒有那么遠，實際上擔心那些:(

我知道，有什么變化！但是我已經接近結果了，我一直在使用以下代碼的不同修改版本：

setTimeout(function() {
  var element = document.getElementById("unique_ID");
  element.innerHTML = "";
  Array.prototype.forEach.call(document.querySelectorAll(".contentclass"), function(e) {
    var example = element.appendChild(e.cloneNode(true));
  });
}, 300);

我沒有發布我所制作的所有版本，因為它們都沒有出現，而且它們都沒有工作：/我認為我甚至沒有這些版本的副本

所以到目前為止我嘗試過的失敗是：

• 將ID添加到<span class="timeline-date">和<div class="timeline-content">所以我可以用js操作它們

• 使用不同的div設置以通過操作js代碼來實現最終結果，這意味着使用以下div / HTML排列以便將cloneNode結果粘貼到一些添加的元素，例如var div = document.createElement('div'); with div.className += "frame"; 等等但是沒有任何作用。

• 我已經嘗試通過javascript將ID添加到使用相同代碼創建的div中，如下所示：

.....（先前為計數器定義的變量 ，當然）

var div = document.createElement('div');
div.id = "id_frame"+counter;
counter++;

但是當我嘗試使用getElementById和使用counter生成的ID發送結果時，它不起作用

我即將放棄，這對我來說相當復雜; P ......有什么建議嗎？ :(

就我所能得到的是這樣的事情：

<div id="ID_unique">
  <div class="frame">
    <span class="timeline-date">date1</span>
  </div>
  <div class=" timeline-content">content1</div>
  <div class="frame">
    <span class="timeline-date">date2</span>
  </div>
  <div class=" timeline-content">content2</div>
  <div class="frame">
    <span class="timeline-date">date3</span>
  </div>
  <div class=" timeline-content">content3</div>
</div>

如果不是那些應該覆蓋內容標簽的那些<div class="frame"> ，那么實際上並不是最終結果的那么遠:(

Answer 1

我認為你應該做的第一件事是讓所有dateClasses和contentclass ，然后創建您的frame逐一：

var dateClasses = $('.dateClass'); // array of all your dateClasses
var contentClasses = $('.contentClasses'); // array of all your contentClasses

for(var i=0; i< Math.min(dateClasses.length,contentClasses.length); i++) {
     var frame = $("<div>", {class: "frame"}); // create your frame node
     var timeLineDate = $("<div">,{class: "timeline-date"});
     var timeLineContent = $("<div">,{class: "timeline-content"});

     //Append DateClass to your timeline-data:
     timeLineData.append(dateClasses[i]);

      //Append ContentClass to your timeline-content:
     timeLineContent.append(contentClasses[i]);

     //Append all to your frame
     frame.append(timeLineData);
     frame.append(timeLineContent);
}

我沒有運行它或測試它很難，但希望它會給你一個如何實現你想要的想法。

希望它有所幫助。