Javascript получает значения li и кодирует их - PullRequest
Новая
       8

Javascript получает значения li и кодирует их

1 голос
/ 07 июня 2010

На данный момент у меня есть два (может быть, больше) неупорядоченных списка, которые можно сортировать с помощью jquery и ui.

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

Однако мне нужна функция, которая получает все содержимое для элементов li и кодирует их в формате json, готовые к отправке в какую-либо функцию db или что-то в этом роде.

Однако я новичок в jquery и не могу найти документацию для элементов li.

Надеюсь, я хорошо это объяснил.

Даниэль

ОБНОВЛЕНИЕ - Образец кода 

    <script type="text/javascript">

    function addSortable(value) {
        $("#sortable1").prepend("<li class='ui-state-default' id='"+value+"'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span>"+value+"</li>");
    }

    function deleteItem(value) {
        $("#item-"+value).fadeOut('slow');

        $('#sortable1 li').each(function() {
            var text = $(this).text();
        });

        document.getElementById('jsoningreds').innerHTML = text;

    }

    $(function() {
        $("#sortable1, #sortable2").sortable({
            connectWith: '.connectedSortable'
        }).disableSelection();
    });
    </script>

    <ul id="sortable1" class="connectedSortable">

    <li id="item-0" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>8 large chicken thighs, skinned <a href="javascript:deleteItem(0)" class="deleteItem"></a></li>

    <li id="item-1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>seasoned flour (celery salt, cayenne pepper, paprika and white pepper) <a href="javascript:deleteItem(1)" class="deleteItem"></a></li>
    <li id="item-2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>2 small eggs, beaten <a href="javascript:deleteItem(2)" class="deleteItem"></a></li>
    <li id="item-3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>100g butter <a href="javascript:deleteItem(3)" class="deleteItem"></a></li>
    </ul>

    <hr />

    <h3>Recipe number 2</h3>
    <ul id="sortable2" class="connectedSortable">

<li id="item-5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>3 tsp vegetable oil <a href="javascript:deleteItem(5)" class="deleteItem"></a></li>
    <li id="item-6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>1 bay leaf <a href="javascript:deleteItem(6)" class="deleteItem"></a></li>
    <li id="item-7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>250g onions, finely sliced <a href="javascript:deleteItem(7)" class="deleteItem"></a></li>
    </ul>

   <p id="jsoningreds">hello</p>

1 Ответ

4 голосов
/ 07 июня 2010

Возможно, вы захотите взглянуть на .sortable('serialize') - это может решить вашу проблему для вас:

Сериализует идентификаторы сортируемых предметов в форму / AJAX отправляемую строку. Вызов этого метода производит хеш который может быть добавлен к любому URL легко отправить заказ на новый товар сервер.

Работает по умолчанию, посмотрев на идентификатор каждого элемента в формате 'setname_number', и он выплевывает хэш как "setname[]=number&setname[]=number".

Вы также можете указать опциональный хеш как Второй аргумент для пользовательского определения, как функция работает. Возможный варианты: key (заменяет part1[] с тем, что вы хотите), attribute (проверить другой атрибут, чем id) и expression (используйте свое собственное регулярное выражение).

Если serialize возвращает пустую строку, убедитесь, что атрибуты id включают нижнее подчеркивание. Они должны быть в форме: "set_number" Например, 3 элемента список с атрибутами id foo_1, foo_5, foo_2 будет сериализовано в foo[]=1&foo[]=5&foo[]=2. Ты можешь использовать знак подчеркивания, знак равенства или дефис отделить набор и номер. За пример foo=1 или foo-1 или foo_1 все сериализовать до foo[]=1.

Если serialize делает больше, чем нужно, .sortable('toArray') должен вернуть вам массив, содержащий id s каждого элемента в сортируемом.

...