/ / Jak sortować html [closed] - javascript, jquery, html, underscore.js-templating

Jak sortować html [closed] - javascript, jquery, html, underscore.js-templating

Chcieliśmy posortować poniższy kod HTML za pomocą Javascript:

<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="32GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">32GB</span></label></fieldset>
<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="16GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">16GB</span></label></fieldset>
<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="128GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">128GB</span></label></fieldset>
<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="64GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">64GB</span></label></fieldset>

Aby wyglądać tak:

<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="16GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">`16GB</span></label></fieldset>
<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="32GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">32GB</span></label></fieldset>
<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="64GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">64GB</span></label></fieldset>
<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="128GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">128GB</span></label></fieldset>

Jak możemy to osiągnąć?

Odpowiedzi:

1 dla odpowiedzi № 1

<!DOCTYPE html>
<html>
<body>

<p>Click the button to sort the array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["32GB", "16GB", "128GB", "64GB"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
fruits.sort();
fruits.sort(function(a, b){return a.length-b.length});
document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>


0 dla odpowiedzi nr 2

function compare(a,b) {
if (a.html < b.html)
return -1;
if (a.html > b.html)
return 1;
return 0;
}

$(document).ready(function(){

var chiled = $("#html").children();
var elems  = [];
for(var i = 0; i < chiled.length; i++){
var elem = {};
elem.html = parseInt($(chiled[i]).find("span").html());
elem.innerHtml = chiled[i];
elems.push(elem);
}
elems.sort(compare);
for(var i = 0; i < elems.length; i++){
$("#outputHTML").append("<fieldset>" + $(elems[i].innerHtml).html() + "</fieldset>");
}


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="html">

<fieldset class="">
<input type="radio" name="devicestorage" id="storage3" value="32GB" class="storage-option device-storage3" />
<label for="storage3" class="device-storage-label"><span class="big-size">32GB</span>
</label>
</fieldset>
<fieldset class="">
<input type="radio" name="devicestorage" id="storage3" value="16GB" class="storage-option device-storage3" />
<label for="storage3" class="device-storage-label"><span class="big-size">16GB</span>
</label>
</fieldset>

<fieldset class="">
<input type="radio" name="devicestorage" id="storage3" value="128GB" class="storage-option device-storage3" />
<label for="storage3" class="device-storage-label"><span class="big-size">128GB</span>
</label>
</fieldset>
<fieldset class="">
<input type="radio" name="devicestorage" id="storage3" value="64GB" class="storage-option device-storage3" />
<label for="storage3" class="device-storage-label"><span class="big-size">64GB</span>
</label>
</fieldset>
</div>
<h2>Sorted HTML</h2>
<div id="outputHTML"></div>


0 dla odpowiedzi № 3

var array = [];
(function (){
var data = $("span").map(function () {
var res = $(this).text().split(/[a-zA-Z]/g)
return parseInt(res[0]);
}).get()
array =data.sort(function(a, b){return a-b})
$("span").each( function(a){
$(this).text(array[a]+"GB")
})

})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Sorted html
<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="32GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">32GB</span></label></fieldset>
<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="16GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">16GB</span></label></fieldset>
<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="128GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">128GB</span></label></fieldset>
<fieldset class=""><input type="radio" name="devicestorage" id="storage3" value="64GB" class="storage-option device-storage3"/><label for="storage3" class="device-storage-label"><span class="big-size">64GB</span></label></fieldset>