Как сортировать HTML

-5

Мы хотели сортировать следующий HTML с использованием JavaScript:Как сортировать 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>

Как мы можем достичь этого?

источник

2016-11-10 user3568243

вы хотите отсортировать два элемента ?? – Mahi

это самый странный вопрос, который я видел – Mahi

это массив или html? – Mahi

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>

источник

2016-11-10 09:29:15 prasanth

кто изменит значение ввода тогда ???? – Mahi

вы должны были сделать для fieldset не span – Mahi

вы только чей-то порядок пролета -_- – Mahi

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

источник

2016-11-10 09:46:15 Mahi

Можете ли вы добавить значение '-' внутри вашего массива. такие как '[" 32GB "," 16GB "," -128GB "," 64GB "];' см. сортировка с правильным или нет. Вы сортируете только с длиной строки. Не числовой порядок – prasanth

Да, отлично работает как шарм – Mahi

вы добавляете '@ # $' в свой массив и видите, сортирует ли он: P – Mahi

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>

источник

2016-11-10 09:50:26 Mitul

ответ

Смежные вопросы