У меня есть вложенный "список" div, который нужно переупорядочить с помощью jquery ui sortable.
<div class="sortable">
<div>
<span class="sortableIndex">1</span>
<div class="sortable">
<div>
<span class="sortableIndex">1</span>
</div>
<div>
<span class="sortableIndex">2</span>
</div>
</div>
</div>
<div>
<span class="sortableIndex">2</span>
<div class="sortable">
<div>
<span class="sortableIndex">1</span>
</div>
<div>
<span class="sortableIndex">2</span>
</div>
</div>
</div>
</div>
JavaScript довольно прост:
$('.sortable').sortable();
Теперь я хочу обновить Numbers в элементах в соответствии с их положением, когда divs перетаскиваются. Поэтому мне нужно каким-то образом выбрать элементы, не выбирая внутренние элементы. Элементы могут находиться внутри других элементов, поэтому они не могут быть прямыми детьми вытащенных.
Я не очень хорошо разбираюсь в JS, поэтому любая помощь будет оценена по достоинству.
Я нашел решение. Он работает, сравнивая ближайший.sortable элемент с.sortable элементом, в котором перетаскиваемый элемент является прямым потомком. Если они совпадают, я могу обновить номер. Если они не совпадают, они не относятся к одному и тому же уровню вложенного списка.
$('.sortable').sortable({
update: function (event, ui) {
var self = ui.item;
var p = self.parent('.sortable');
var elems = p.find('.sortableindex');
var order = 1;
elems.each(function () {
var elem = $(this);
var closest = elem.closest('.sortable');
if (closest[0] == p[0]) {
elem.text(order);
order++;
}
});
}
});