Hinzufügen div und sortieren in der gleichen Zeit

Question

Ich möchte mein div zu anderen hinzufügen und im gleichen basierend auf data-sort Wert sortieren.

Beispiel:

<div id="divbox"> 
    <div class="somediv" data-sort="0.10">some content</div> 
    <div class="somediv" data-sort="0.05">some content</div> 
</div> 

Und wie ein anderes div divbox mit Mehrwert zu schaffen data-sort="0.7" und ich sollte zwischen zwei divs platziert werden, wie ich diese tun können.

Answer 1

Verwenden Sie append(), um neue HTML-Inhalte an ein Element anzuhängen. Zur Bestellung verwenden Sie sort() Methode und für die Reflexion in die dom append in neuer Reihenfolge mit appendTo() Methode.

// get the parent div 
 
$('#divbox') 
 
    // append new div to it 
 
    .append('<div class="somediv" data-sort="0.07">some content</div>') 
 
    // get all children divs 
 
    .children() 
 
    // sort the object collection based on data-sort value 
 
    .sort(function(a, b) { 
 
    // get difference for sorting based on number 
 
    return $(b).data('sort') - $(a).data('sort'); 
 
    // append back to parent for updating order 
 
    }).appendTo('#divbox');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divbox"> 
 
    <div class="somediv" data-sort="0.10">some content</div> 
 
    <div class="somediv" data-sort="0.05">some content</div> 
 
</div>

---

Oder Sie können über Kinder durchlaufen und div auf dem Vergleich des Attributwert basiert einzufügen.

// create jQuery object of append content 
 
var $ele = $('<div class="somediv" data-sort="0.07">some content</div>'); 
 
// get sort value of it 
 
var dataVal = +$ele.data('sort'); 
 

 
// iterate over existing divs 
 
$('#divbox .somediv').each(function(i) { 
 
    // get sort value of current element 
 
    var thisVal = +$(this).data('sort'); 
 
    // if sort value is greter than the first div then append the element before it 
 
    if (i == 0 && dataVal > thisVal) { 
 
    // append before first element 
 
    $ele.insertBefore(this); 
 
    // break the for loop 
 
    return false; 
 
    // if the element is last or satisfies the codition for insertion 
 
    } else if ($(this).next().length == 0 || (datVal <= thisVal && thisVal > +$(this).next().data('sort'))) { 
 
    // insert the eleemnt 
 
    $ele.insertAfter(this); 
 
    // break the loop 
 
    return false; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divbox"> 
 
    <div class="somediv" data-sort="0.10">some content</div> 
 
    <div class="somediv" data-sort="0.05">some content</div> 
 
</div>

Answer 2

Mit reinem JS Sie wie folgt tun könnte;

var myDiv = document.createElement("div"), 
 
    divList = divbox.querySelectorAll(".somediv"), 
 
    frag = document.createDocumentFragment(); 
 
myDiv.className = "somediv"; 
 
myDiv.dataset.sort = "0.07"; 
 
myDiv.textContent = "new text here 07"; 
 

 
divbox.appendChild([...divList].concat(myDiv) 
 
           .sort((a,b) => +a.dataset.sort - +b.dataset.sort) 
 
           .reduce((df,div) => (df.appendChild(div),df),frag));

<div id="divbox"> 
 
    <div class="somediv" data-sort="0.10">some content 10</div> 
 
    <div class="somediv" data-sort="0.05">some content 05</div> 
 
</div>