Помогите с изменением индекса в javascript / jquery - PullRequest
Новая
       19

Помогите с изменением индекса в javascript / jquery

1 голос
/ 27 января 2010

У меня есть массив javascript, который выглядит следующим образом: 

var styles = new Array();
styles[0] = { ... Position: 0, ... };
styles[1] = { ... Position: 1, ... };
styles[2] = { ... Position: 2, ... };
...
styles[N] = { ... Position: N, ... };

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

<div id="container">
 <div>... item 1...</div> 
 <div>... item 2...</div> 
 <div>... item 3...</div> 
</div>

Теперь div "container" также можно сортировать в jquery. Таким образом, я могу перетаскивать предметы и менять положение. Теперь, когда пользователь перетаскивает элемент в другую позицию, я обновляю позиции обратно в массиве, просматривая элементы div, что довольно плохо. Это выглядит примерно так: 

var items = $("#container");
for (var i = 0; i < items.length; i++)
{
    ....
    styles[i] = { ... Position: i, ... };
}

Есть ли лучший способ добиться этого?

Обновление 1:

Мне нужно сохранить позиции в базе данных, поэтому мне нужно изменить мой массив после того, как список был изменен. Список меняется в зависимости от других критериев. Таким образом, у меня может быть список из 10 предметов или список из X . Это зависит от того, какой список выбирает пользователь. Теперь, если пользователь меняет один список, а затем хочет увидеть второй список, то мне нужно убедиться, что первый список сохраняет позиции.

Ответы [ 2 ]

1 голос
/ 27 января 2010

Я думаю, что ответ Дрю Уиллса на высоте, и это также может помочь. Div - это объект JavaScript, что означает, что вы можете добавить к нему свойства. Таким образом, вы можете уменьшить количество строк кода JavaScript и увеличить выразительность кода, прикрепив ваш «информационный объект» прямо к каждому элементу div, что означает, что вам больше не нужен ваш массив.

Откуда ваш массив? Я собираюсь предположить, что это JSON-версия некоторых данных, которые вы имеете на сервере. Итак, я предполагаю (предполагаю), что у вас есть какой-то цикл «каждый» или for, который создает элементы div из массива, возможно, так: 

for (var i = 0; i < styles.length; i++)
{
    var newDiv = $("<div>" + style[i].item + "</div>";
    $("#container").append(newDiv);
}

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

for (var i = 0; i < styles.length; i++)
{
    var newDiv = $("<div>" + style[i].item + "</div>";

    // KEY NEW LINE FOLLOWS:
    newDiv.myCustomObject = styles[i];

    $("#container").append(newDiv);
}

Теперь, когда div'ы сортируются повсюду, этот "myCustomObject" идет вместе с ними. Вам больше не нужен массив. Если вам нужно обновить свойство «Position» в «myCustomObject», используйте свойство «index» div, как сказал Дрю Уиллс.

Итак, представьте, что у вашего объекта "styles" есть свойство, называемое "Color". Представьте, что вы хотите, чтобы при нажатии отображалось предупреждение, сообщающее цвет, связанный с элементом, на котором они нажали. Теперь вы можете сделать это без использования массива "styles", потому что у div теперь есть все, что вам нужно. Чтобы вы могли сделать это: 

$("#container div").click(function() {
   alert("The color is " + this.myCustomObject.Color);
});

Позже, когда придет время опубликовать или отправить через ajax позиции, вы можете сделать это: 

$("#container div").each(function(index) {
   this.myCustomObject.Position = index;
}

ПРИМЕЧАНИЕ. Кроме того, некоторые люди предпочитают использовать метод data () JQuery, чтобы связать myCustomObject с div. Он достигает того же результата и, возможно, более полно собирает мусор в некоторых браузерах.

0 голосов
/ 27 января 2010

Зачем вам нужно знать должность?

Вам вообще не придется отслеживать позицию, если вы можете положиться на метод jQuery $. Index () .

Когда вам нужно узнать положение элемента, просто используйте что-то вроде следующего ... 

$("#container div").index(myDiv);

ОБНОВЛЕНИЕ 1:

Понятно - серверу нужно знать позиции, чтобы хранить их в БД. Тем не менее, я не в восторге от идеи иметь 2 представления этих данных на странице: разметка (divs) и массив JS. Я бы посмотрел на изменение моего кода для создания массива (из divs) в последнюю секунду ... перед тем, как отправить его на сервер. Таким образом, вы можете перебирать элементы div по порядку, и вам не придется поддерживать порядок параллельно в отдельной структуре данных. Синхронизация двух структур в грязной и подверженной ошибкам

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

Небольшой совет: если в области есть элементы данных, которые каким-либо образом не представлены в разметке, попробуйте пометить разметку произвольной информацией. 

<a href="whatever.html" foo="bar">link text</a>
...