JavaScript заказывает DOM-элементы на основе имени

Question

Итак, у меня есть список скрытых полей:

<ul class="reorderable">
    <li>Foo<input class="hiddenThing" type=hidden name="thing[0]" value=foo /></li>
    <li>Bar<input class="hiddenThing" type=hidden name="thing[1]" value=bar /></li>
    <li>Baz<input class="hiddenThing" type=hidden name="thing[2]" value=baz /></li>
</ul>

Чисто информационный, я не ожидаю, что это будет связано с ответом, но к вашему сведению, я использую JQuery UI "сортируемыйПлагин:

<script type="text/javascript">
$(document).ready(function () {
    $('ul.reorderable').sortable({ update: stuffHappens; });
}
</script>

Из этого следует понять, что сортируемый плагин позволяет пользователю произвольно изменять порядок этих элементов.Теперь я хочу реализовать кнопку возврата.

<button value="Revert" onClick="revertList()" />

Я хочу, чтобы вернул элементы списка в порядке, основанном на имени скрытых входных данных .Я предполагаю, что это потребует регулярных выражений (чтобы извлечь число из скобок в имени. thing[10] должно идти после thing[9]), и я предполагаю, что JQuery будет полезен.Но я пытаюсь решить эту проблему, вероятно, потому что я не знаком ни с сортировкой элементов DOM, ни с регулярным выражением в JavaScript.

Сохранение этого формата имен обязательно.

Answer 1

function revertList() {
    var $ul = $('ul.reorderable'),
        $inps = $ul.find('li').find('input.hiddenThing');

    for (var i = 0, il = $inps.length; i < il; i++) {
        $inps.filter('[name="thing['+i+']"]').closest('li')
             .detach().appendTo($ul);
    }
}

Демо →

Answer 2

Я бы, вероятно, использовал стандартную сортировку массива, затем удалил все элементы и добавил их обратно отсортированными:

$('#reorder').click(function() {
    // get the list items and store references to them,
    // grabbing their names on the way
    var items = [];
    $('ul.reorderable li').each(function() {
        var name = $('input', this).attr('name'),
            // regex is overkill if you're always using the same format
            // this is quick, but a little hacky - parseInt stops
            // at non-numeric characters
            pos = parseInt(name.split("[")[1]);
        items.push({
            item: this, // store a reference to the DOM element
            pos: pos 
        });
    });
    // now sort by name
    items.sort(function(a,b) {
        return a.pos > b.pos ? 1 : -1;
    });
    // delete the items and add them back sorted
    var $ul = $('ul.reorderable');
    $ul.empty();
    // forEach() might be more elegant, but isn't cross-browser yet
    for (var x=0; x<items.length; x++) {
        $ul.append(items[x].item);
    }
});

Рабочая версия здесь: http://jsfiddle.net/nrabinowitz/Ew2EX/3/

Это может замедлиться, если у вас есть большое количество элементов, но это гораздо проще, чем пытаться переупорядочить их на месте.

Код обновлен для сравнения одно- и двузначных чисел (потому что "2"> "11").

Answer 3

Я знаю, что это старый поток, но на самом деле очень просто сортировать элементы после того, как вы выбрали их с помощью jQuery.

Будучи на основе массива, вы можете применить к нему сортировку, используя стандартный Array.prototype.sort()метод.После того, как дочерние элементы были отсортированы, вы можете добавить их обратно в родительский элемент, не беспокоясь о дублировании элементов;это просто сработает:)

Чтобы получить числовой индекс из названия, я выбрал простую фильтрацию всего, что не является цифрой.

$('.reorderable').append(function() {
  return $(this).children().sort(function(a, b) {
    var re = /\d+/,
        a_index = +a.name.match(re)[0],
        b_index = +b.name.match(re)[1];
    return a_index - b_index;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="reorderable">
    <li>Foo<input class="hiddenThing" type=hidden name="thing[2]" value=foo /></li>
    <li>Bar<input class="hiddenThing" type=hidden name="thing[1]" value=bar /></li>
    <li>Baz<input class="hiddenThing" type=hidden name="thing[0]" value=baz /></li>
</ul>