There is such a list of blocks, you need to sort on the s3 block and change the position of the item block (well, raise it higher or lower)

<div class='s'> <div class='item'> <div class='s1'>text</div> <div class='s2'>text</div> <div class='s3'>1232</div> </div> <div class='item'> <div class='s1'>text</div> <div class='s2'>text</div> <div class='s3'>1232</div> </div> </div>

How to do it? It's just that with js I'm only in the process of learning, and I need to do such crap now. When trying to read different articles in pieces, in the head porridge. Thank you in advance.

  • if you want to write from scratch, you may not write - it is not very accepted here. if you write, but do not understand something or do not work, then they are most likely prompted. - splash58
  • value is numeric or maybe text? - Grundy
  • I found a TinySoft plugin for myself, it solved my problem. - DimenSi

1 answer 1

It is necessary to pull out all the blocks in the array, sort it by the desired parameter, and insert it back into the DOM in the new order:

 var $el = $('#container') ,arr = $el.children().sort( function( a, b){ a = parseInt( $('.s3', a).text(), 10); b = parseInt( $('.s3', b).text(), 10); return (a>b ? 1 : (a==b ? 0 : -1)); } ); $el.append( arr); 
 .item{border:1px solid #999; margin:10px;width:100px} .s3{background-color:#DDD} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='container'> <div class='item'> <div class='s1'>s1 1200</div><div class='s2'>s2 1200</div><div class='s3'>1200</div> </div> <div class='item'> <div class='s1'>s1 500</div><div class='s2'>s2 500</div><div class='s3'>500</div> </div> <div class='item'> <div class='s1'>s1 1300</div><div class='s2'>s2 1300</div><div class='s3'>1300</div> </div> <div class='item'> <div class='s1'>s1 700</div><div class='s2'>s2 700</div><div class='s3'>700</div> </div> </div>