Как сортировать дивы на основе значения класса внутри этого Div

Мой HTML заключается в следующем:Как сортировать дивы на основе значения класса внутри этого Div

<div class="comment_div"> 
     <span class="upvotes">4</span> 
</div> 

<div class="comment_div"> 
     <span class="upvotes">7</span> 
</div> 

<div class="comment_div"> 
     <span class="upvotes">2</span> 
</div>

Значение .upvotes является динамическим, так что я хочу JS/JQuery для сортировки дивы на основе стоимости в то время. Как мне это сделать?

источник

2017-02-21 Zorgan

Посмотрите на tinysort http://tinysort.sjeiti.com – Geoff

Если они все одинаковые, как вы показываете их в своем вопросе, а затем просто сортируйте данные перед заполнением div. – rasmeister

Просто напоминание о том, что Stack Overflow не является бесплатной программой кодирования. Вы должны провести исследование, попытаться решить проблему, а затем попросить о помощи. –

Можете ли вы попробовать следующий код?

divArr = $(".comment_div") 
divArr.sort(function(a, b) { 
     return $(a).find("span").text() > $(b).find("span").text() ? 1: -1; 
    }) 
$("body").append(divArr)

Предполагая, что ваш html находится в следующем формате;

<body> 
     <div class="comment_div"> 
      <span class="upvotes">4</span> 
     </div> 

     <div class="comment_div"> 
      <span class="upvotes">7</span> 
     </div> 

     <div class="comment_div"> 
      <span class="upvotes">2</span> 
     </div> 
</body>

И если ваш HTML является динамическим, вы можете повторно запустить фрагмент кода снова & снова прибегнуть к дивы с новыми значениями.

jsFiddle link подробно выше ответ; https://jsfiddle.net/1gn7no8s/

источник

2017-02-21 00:14:43

Не имеет эффекта. – Zorgan

@Zorgan А, вы хотите отсортировать html? Я думал, что вы захотите получить ссылки только на div. –

Да, я бы хотел, чтобы все div были отсортированы и перемещены соответственно. – Zorgan

Вы можете сделать следующее:

Выберите все дивы в объект JQuery.
Позвоните .get() на объект JQuery, чтобы получить массив div.
Используйте функцию Array.prototype.sort() для сортировки div в массиве.
Создайте еще один объект JQuery, передав массив divs в $().

Код:

var divs = $('.comment_div').get(); 
divs.sort(function(div1, div2) { 
    function getValue(div) { return parseInt($(div).children('span:first').text(), 10); } 
    var val1 = getValue(div1), val2 = getValue(div2); 
    return (val1 > val2) ? 1 : ((val1 < val2) ? -1 : 0); 
}); 
var $sortedDivs = $(divs);

jsfiddle

Примечания:

JQuery имеет .sort() функцию, но она не документирована, поэтому, вероятно, лучше не использовать его.
Я предполагаю, что значения являются числами и должны быть отсортированы как таковые, поэтому вам нужно преобразовать их в числа, иначе вы будете сортировать их как строки.

источник

2017-02-21 00:36:34

Спасибо, что это работает. Есть некоторые другие вещи, которые не работают, поэтому я вернусь и спрошу. – Zorgan

Как сортировать дивы на основе значения класса внутри этого Div

ответ

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