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

我没有发布我制作的所有版本，因为它们都没有出现，而且它们都没有工作：/我认为我甚至没有那些的副本< / p>

所以到目前为止我尝试过的失败是：

将ID添加到<span class="timeline-date">和<div class="timeline-content">，以便我可以使用 js
使用不同的div设置以通过操作 js 代码来实现最终结果，这意味着使用以下div / HTML排列来粘贴{ {1}}会在其中添加一些元素，例如cloneNode和var div = document.createElement('div');等。但是没有任何效果。
我尝试通过javascript将ID添加到使用相同代码创建的div.className += "frame";，如下所示：

.....（先前为计数器定义的变量）

div

但是当我尝试使用var div = document.createElement('div'); div.id = "id_frame"+counter; counter++;发送结果并使用getElementById

生成的ID时，它无效

我即将放弃，这对我来说相当复杂; P ...有什么建议吗？：（

据我所知，是这样的：

counter

如果不是那些应该涵盖内容标签的<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>，那么实际上与最终结果相差甚远：（

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

我没有运行它或测试它很难，但希望它会让你知道如何实现你想要的。

希望它有所帮助。

使用Javascript

1 个答案: