Блог

Главная - Вопросы по программированию - Сортируемые списки соединений jQuery — получение отсортированных значений идентификатора списка и значения данных

Сортируемые списки соединений jQuery — получение отсортированных значений идентификатора списка и значения данных

#javascript #jquery #jquery-ui

#javascript #jquery #jquery-пользовательский интерфейс

Вопрос:

я изо всех сил пытаюсь получить значения списков соединений для сортировки пользовательского интерфейса jQuery

 <ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default" data-value="U1" id="L1">Item 1</li>
  <li class="ui-state-default" data-value="U2" id="L2">Item 2</li>
  <li class="ui-state-default" data-value="U3" id="L3">Item 3</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight" data-value="U6" id="R1">Item 1</li>
  <li class="ui-state-highlight" data-value="U7" id="R2">Item 2</li>
  <li class="ui-state-highlight" data-value="U8" id="R3">Item 3</li>
</ul>
 <input type="submit" value="Submit" onclick="submit()">

часть javascript

 $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();

    var dataList = $("#sortable1 li").map(function() {
      return $(this).data("id");
    }).get();
});

function submit(){
   alert(dataList);
}

я не могу получить вывод для var dataList .

Следующий код работает для меня, но мне нужен метод для получения значений атрибута data-value вместе с идентификаторами?

 var idsInOrder1 = $("#sortable1").sortable("toArray");
var idsInOrder2 = $("#sortable2").sortable("toArray");

Ответ №1:

Вы можете получить атрибут HTML с помощью .attr() функции:

 $(this).attr("data-value");

Вы также можете использовать ту же функцию для получения id -s:

 var dataList = $("#sortable1 li").map(function() {
  return $(this).attr("id");
}).get();
// or, to get both...
dataList = $("#sortable1 li").map(function() {
  return { id: $(this).attr("id"), dataValue: $(this).attr("data-value") };
}).get();
// Now you can get id-s and data values as...
var myId = dataList[0].id;
var myValue = dataList[0].dataValue;

Однако такое использование .map() and .get() несколько сбивает с толку. Да, это работает, и если вам будет проще, продолжайте и используйте его, но тот же эффект может быть достигнут гораздо более понятным с помощью .each() :

 var dataList = [];
$("#sortable1 li").each(function(idx, elt) {
    dataList.push({ id: $(elt).attr("id"), dataValue: $(elt).attr("data-value") });
});

Вот демонстрационная скрипка, показывающая все это в действии: http://jsfiddle.net/JpcXL /

Метки: