jQuery sortable get .index () до и после сортировки?

17

Я использую jQuery для сортировки по плагину тегов, Плагин поддерживает массив объектов, которые относятся к li в том же порядке, что и фактические элементы.

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

Я думал, что просто смогу в стартовом событии вызвать $(ui).index() и в вызове события обновления то же самое, что даст мне начальную позицию и конечную позицию, но оба вызова возвращают -1 .

Как мне это сделать? <Сильный> Состав:

<ul>
<li>here<a class="close">x</a></li>
<li>are<a class="close">x</a></li>
<li>some<a class="close">x</a></li>
<li>tags<a class="close">x</a></li>
</ul>

Структура массива:

[{
    label: 'here',
    value: 36,
    element: '$(the li that this info is about)',
    index: 0
},
{
    label: 'are',
    value: 42,
    element: '$(the li that this info is about)',
    index: 1
},
{
    label: 'some',
    value: 21,
    element: '$(the li that this info is about)',
    index: 2
},
{
    label: 'tags',
    value: 26,
    element: '$(the li that this info is about)',
    index: 3
}]

JavaScript:

$('ul').sortable({
    start: function(event, ui){...},
    update: function(event, ui){...}
});
    
задан Hailwood 06.05.2012 в 05:15
источник
  • Можете ли вы опубликовать некоторые из своих кодов, чтобы мы могли где-нибудь начать? Трудно вести вас, не зная, что такое ui и т. Д. Спасибо. –  jmort253 06.05.2012 в 05:20

3 ответа

11

, если .index() возвращает -1, что предполагает, что вы делаете этот запрос до того, как элемент будет доступен для DOM. или вы неправильно указали селектор и снова не существует @ время вызова или пусто по отношению к функции .index ()

    
ответ дан Brandt Solovij 06.05.2012 в 05:26
источник
  • Вы правы, проблема была в том, что мне нужно было вызывать $ (ui.item) .index () не просто $ (ui) .index ()! –  Hailwood 06.05.2012 в 05:38
  • Примечание: $ (ui.item) не требуется; ui.item.index () будет работать нормально. –  Jane Panda 25.03.2014 в 14:43
27
$(function() {
    $( "#sortable" ).sortable({
        update: function(event, ui) { 
            console.log('update: '+ui.item.index())
        },
        start: function(event, ui) { 
            console.log('start: ' + ui.item.index())
        }
    });
    $( "#sortable" ).disableSelection();
});
    
ответ дан sidarcy 18.10.2012 в 23:31
источник
2

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

<ul id="sortable">
<li data-id="1" class="ui-state-default">1</li>
<li data-id="2" class="ui-state-default">2</li>
<li data-id="3" class="ui-state-default">3</li>
</ul>

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

$('ul li:nth-child(0)').data('id');
$('ul li:nth-child(1)').data('id');
$('ul li:nth-child(2)').data('id');
    
ответ дан tim peterson 06.05.2012 в 05:37
источник