Как отсортировать элементы по атрибуту?

Question

[Иван Антонов]

Как лучше отсортировать в DOMe элементы по атрибуту sort?

<ul>
    <li sort="2">Суп</li>
    <li sort="1">Салат</li>
    <li sort="5">Сок</li>
    <li sort="4">Плов</li>
    <li sort="3">Банан</li>
</ul>

Answer 1

[Алексей Немиро]

Пример с использованием jQuery:

$('li[sort]').sort(function (a, b) {
  return parseInt($(a).attr('sort'), 10) < parseInt($(b).attr('sort'), 10) ? -1: 1;
}).appendTo('ul');

Посмотреть результат.

И да, для пользовательских атрибутов лучше использовать префикс data-, чтобы все соответствовало стандартам :-)

Вот еще пример, с изменением направления сортировки.

Answer 2

[jlekapb]

Привет, лучше все же использовать data-* атрибут, те data-sort.

jsfiddle.net/lkp_chg/1b324kxf

<ul>
    <li data-sort="2">Суп</li>
    <li data-sort="1">Салат</li>
    <li data-sort="5">Сок</li>
    <li data-sort="4">Плов</li>
    <li data-sort="3">Банан</li>
</ul>

var $wrapper = $('ul');

$wrapper.find('li').sort(function (a, b) {
    return +a.dataset.sort - +b.dataset.sort;
})
.appendTo( $wrapper );

Comments

[aen]

dataset в IE не работает

[jlekapb]

aen: this.getAttribute("data-sort") или this.data("sort")