divとsortを同じ時間に追加する

Question

私のdivを他の人に追加して、data-sortという値に基づいて同じものを並べ替えたいと思います。

例：

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

そして、どのように値data-sort="0.7"でdivboxに別のdivを追加すると、私はこれらを行うことができますどのように2つのdivの間に配置する必要があります。

Answer 1

append()を使用して、要素に新しいhtmlコンテンツを追加します。ご注文の場合appendTo()の方法を使用してdomに追加する方法とappendTo()の方法を使用してください。

// 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>

---

それとも、子供を反復し、属性値の比較に基づいてdiv要素を挿入することができます。次のように行う可能性があります純粋なJSで

// 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

。

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>