Как получить порядок переупорядоченных элементов

Question

У меня проблема с порядком получения моих элементов.

Сценарий: у меня есть такая структура:

<div class="container">
<div class="element" id="element1">
<div class="element" id="element2">
<div class="element" id="element3">
<div class="element" id="element4">

, но я переупорядочиваю / удаляю / добавляю некоторые элементысвязанные с некоторыми условиями. Итак, предположим, что окончательная структура выглядит так:

<div class="container">
<div class="element" id="element6">
<div class="element" id="element2">
<div class="element" id="element8">
<div class="element" id="element4">
<div class="element" id="element1">
<div class="element" id="element7">

и, наконец, я хочу получить список элементов в окончательном порядке. Я использую

var ord= '';
for (i=1;i<=($('.element').length);i++){
  var index = $('#element'+i).index();
  ord+= index+' / ';
}

, но этомне индексы элементов в порядке создания, а не в окончательном порядке.Наконец, я думаю, что мне нужно получить идентификатор элемента из его индекса, например

var index = indexof($('#element'+i)); // ok this is not lookink like correct :)

Но я так и не нашел.

Answer 1

Для этого HTML:

<div class="container">
    <div class="element" id="element6">1</div>
    <div class="element" id="element2">2</div>
    <div class="element" id="element8">3</div>
    <div class="element" id="element4">4</div>
    <div class="element" id="element1">5</div>
    <div class="element" id="element7">6</div>
</div>

и этот javascript:

var arr = Array();
$('.container .element').each(function(){
   arr.push($(this).attr('id').replace('element', ''));
})

вы получите это:

arr = ["6", "2", "8", "4", "1", "7"]

Answer 2

для этой разметки (переупорядоченные элементы ...):

<div class="container">
    <div class="element" id="element4"></div>
    <div class="element" id="element1"></div>
    <div class="element" id="element5"></div>
    <div class="element" id="element6"></div>
    <div class="element" id="element7"></div>
</div>

команда $ ('. Container'). Find ('. Element') создаст элементы в порядке, поскольку онипоявляются в документе.

elements = $('.container').find('.element')
console.log(elements[0].id) // will print out 'element4'
console.log(elements[2].id) // ---> 'element5'

и т. д.

, чтобы получить числовой идентификатор из строки 'elementX', просто выполните

parseInt(elements[3].id.replace('element','')) // will return 6

Answer 3

Я думаю, что вам лучше просто создать массив из N элементов и инициализировать его начальным порядком элементов div. Затем каждый раз, когда вы меняете элементы и меняете их порядок, вы обновляете массив, меняя соответствующие элементы и просто читая массив каждый раз, чтобы получить текущий порядок.

Например, предположим, что у вас есть 10 элементов, вы инициализируете массив с помощью:

order = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

Каждый раз, когда вы делаете какое-либо изменение порядка, скажем, вы меняете номер элемента X на номер элемента Y, вы также меняете соответствующие элементы массива:

swap(order, X, Y);

(Кстати, вам придется определить функцию подкачки). Таким образом, массив order будет содержать текущий порядок каждый раз.