Другой Грег П, посмотрим, что мы можем здесь сделать! Вероятно, это артефакт попытки сократить код, но прежде всего вам нужно убедиться, что все возвращаемые данные упакованы в массив; в противном случае вы не сможете выполнить итерацию по индексу. Это только ваши данные, как показано в ваших комментариях, за исключением заключенных в квадратные скобки:
[
{
"product_id": 10004,
"product_name": "DVD"},
{
"product_id": 10040,
"product_name": "CD"},
{
"product_id": 10059,
"product_name": "Blue-Ray"}
]
Далее, хотя вы возвращаете идентификатор продукта, ваша базовая разметка, кажется, не использует его (с 3 iDevices). Я предполагаю, что вы хотите увидеть имя, а затем я собираюсь сохранить идентификатор в произвольном атрибуте данных (data-productId
)).
Так как это будут элементы списка, вы можете придумать и сделать узлы, а затем заполнить их значениями, но если вы объедините строку <li>
, а затем добавите, вы получите тот же результат, поэтому это то, что я сделаю. Возможно, вы предпочтете построить, а затем заполнить.
var $productList = $('#catalog ul');
$.each(data, function(i, item) {
var listItem = '<li data-productId="' + item.product_id + '">' + item.product_name + '</li>';
$productList.append(listItem);
});
Пример основ: http://jsfiddle.net/sQtkB/
Это то, что добавляет их в список. Что касается их перетаскивания, это роль jQuery UI. Если вы уже инициализировали список как перетаскиваемый, я полагаю , что слушателем является сам узел списка, так что вы можете добавить к нему, и его члены все равно должны вызывать события. Если нет, возможно, вам придется заново инициализировать перетаскиваемый список.