Jquery：按内部元素的属性排序

Question

I have following code:

<div>
  <div id="1">
    <h3>Price: 50</h3>
    <span id="price" min-price="50"></span>
  </div>
  <div id="2">
    <h3>Price: 30</h3>
    <span id="price" min-price="30"></span>
  </div>
  <div id="3">
    <h3>Price: 40</h3>
    <span id="price" min-price="40"></span>
  </div>
</div>

I need to sort these 3 divs based on min-price attribute. Is it possible in Jquery? I found sort() function, but I was not able to use it correctly. Thank you.

Answer 1

You can use .sort() function:

$('div[id]').sort(function (a, b) {
  var minprice1 = parseInt( $(a).find('span').attr('min-price'));
  var minprice2 = parseInt( $(b).find('span').attr('min-price'));
  return (minprice1 < minprice2 ) ? -1 : (minprice1 > minprice2 ) ? 1 : 0;
});

Answer 2

Try this :

 $(document).ready(function() { $("div[id]").each(function(number,ele) { $("div[id]").not($(ele)).each(function(index,el){ a = $(ele).find("span").attr("min-price"); b = $(el).find("span").attr("min-price"); if( parseFloat(a) > parseFloat(b) ) $(ele).insertAfter($(el)); }) }) })

 <div> <div id="1"> <h3>Price: 50</h3> <span id="price" min-price="50"></span> </div> <div id="2"> <h3>Price: 30</h3> <span id="price" min-price="30"></span> </div> <div id="3"> <h3>Price: 40</h3> <span id="price" min-price="40"></span> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 3

 function sortElements(element, prop, sortDescending) { var arrElements = [], origElements = []; $.each(element, function(){ arrElements.push($(this).attr(prop)); origElements.push($(this).attr(prop)); }); arrElements.sort(); if(sortDescending) arrElements.reverse(); for(var i = 0, l = arrElements.length; i < l; i++) $("#sortDiv").append($("#"+arrElements[i])); $("#divOrig").html($("#sortDiv").html()); $("#sortDiv").remove(); } sortElements($("#divOrig span"), "min-price", true);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="divOrig"> <div id="50"> <h3>Price: 50</h3> <span id="price" min-price="50"></span> </div> <div id="30"> <h3>Price: 30</h3> <span id="price" min-price="30"></span> </div> <div id="40"> <h3>Price: 40</h3> <span id="price" min-price="40"></span> </div> </div> <div id="sortDiv" style="display:none" ></div>