2016-11-10 63 views
-5

我们想使用Javascript进行排序下面的HTML:如何排序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> 

看起来像这样:

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

我们怎样才能做到这一点?

+0

? – Mahi

+1

这是我见过 – Mahi

+0

最奇怪的问题是,数组或HTML? – Mahi

回答

0

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>

+0

谁将改变输入的值然后? – Mahi

+0

你应该做的字段集不能跨越 – Mahi

+0

你是跨度changine为了只-_- – Mahi

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

您可以在阵列中添加'-'值吗?如'[“32GB”,“16GB”,“-128GB”,“64GB”];'看到有与正确排序或not.You被length.Not一个数字顺序串仅排序 – prasanth

+0

耶工作正常像魅力 – Mahi

+0

你在你的数组中添加'@#$',看看它是否正在排序:P – Mahi

0

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>

要排序二元