Сортировать элементы с помощью jquery

214

27 марта 2017, 06:55

Есть элементы со значениями

<ul class="error_sorting">																				<li> 
<progress class="progress progress-striped progress-danger" value="1" max="100">1%</progress></li> 
<li> 
<progress class="progress progress-striped progress-danger" value="1" max="100">1%</progress></li> 
<li> 
<progress class="progress progress-striped progress-danger" value="80" max="100">80%</progress></li> 
<li> 
<progress class="progress progress-striped progress-danger" value="10" max="100">10%</progress></li> 
<li> 
<progress class="progress progress-striped progress-warning" value="1" max="100">1%</progress></li>																																																																		</ul>

хочу отсортировать список

	$(document).ready(function() { 
			var $elements = $('li progress value'); 
			var $target = $('.error_sorting'); 
			  
			$elements.sort(function (a, b) { 
				var an = $(a).text(), 
					bn = $(b).text(); 
				  
				if (an && bn) { 
					return an.toUpperCase().localeCompare(bn.toUpperCase()); 
				} 
				  
				return 0; 
			}); 
			  
			$elements.detach().appendTo($target); 
	});

но видимо, что-то делаю не так. не сортирует.

Answer 1

Непонятно, что Вы рассчитываете получить таким селектором: $('li progress value').

$(document).ready(function() { 
  var $elements = $('ul.error_sorting > li'); 
  var $target = $('.error_sorting'); 
 
  $elements.sort(function(a, b) { 
    var an = parseInt($(a).find('progress').attr('value')), 
      bn = parseInt($(b).find('progress').attr('value')); 
    return an - bn; 
  }); 
 
  $elements.detach().appendTo($target); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="error_sorting"> 
  <li> 
    <progress class="progress progress-striped progress-danger" value="1" max="100"> 1 % </progress></li> 
  <li> 
    <progress class="progress progress-striped progress-danger" value="1" max="100"> 1 % </progress></li> 
  <li> 
    <progress class="progress progress-striped progress-danger" value="80" max="100"> 80 % </progress></li> 
  <li> 
    <progress class="progress progress-striped progress-danger" value="10" max="100"> 10 % </progress></li> 
  <li> 
    <progress class="progress progress-striped progress-warning" value="1" max="100"> 1 % </progress></li> 
</ul>