Geek Answers Handbook

Sort a div inside another div using Javascript

So, if you have some free time:

This is a rather complicated thing, or I'm too naive, because I work for hours without getting the desired result / result, I would like you to help me if you have free time.

Firstly, this is the data that I have that is extracted from the PHP news feed, so it is not a static number of elements:

<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

I need to work with classes and identifiers, because this is not a php template mechanism, so I can not call one element, the code is distributed among several files, and an easier way to achieve what I need is through javascript and their identifiers / classes

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

, , , :/ ,

:

  • <span class="timeline-date"> <div class="timeline-content">, js

  • div, , js, div/HTML, cloneNode , var div = document.createElement('div'); div.className += "frame"; .. .

  • javascript div, , - :

..... ( , )

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

, getElementById, , counter

, : 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">, : (

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

, , , , .

, .

+1

More articles:


All Articles