자바는 li 값을 가져 와서 인코딩합니다

Question

현재 jquery와 ui로 정렬 할 수있는 정렬되지 않은 두 개의 목록이 있습니다.

목록이 연결되어 있고, 항목을 드래그 할 수 있으며, 항목을 제거 할 수 있고 목록에 추가하는 양식이 작동한다는 점이 다릅니다.

그러나 내가 필요한 것은 li 항목에 대한 모든 내용을 가져오고 json은 일부 db 함수 나 다른 것으로 전송할 준비를 인코딩합니다.

하지만 jquery에 새로 온 사람은 항목에 대한 설명서를 찾을 수 없습니다.

호프 Ive가 이것을 잘 설명했습니다.

다니엘

UPDATE - 샘플 코드

<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>  

Answer 1

당신은 .sortable('serialize')보고 할 수 있습니다 - 그것은 당신을 위해 문제를 해결할 수 있습니다 :

는 정렬의 항목 ID의 로 직렬화 양식/아약스 제출 가능 문자열 이 메서드를 호출하면 서버에 이라는 새 항목 주문을 쉽게 제출할 수있는 에 대한 임의의 URL에 추가 할 수있는 해시 가 생성됩니다.

그것은 형식 'setname_number'에서 각 항목의 ID를 보면 기본적으로 작동하고, 그것은 "setname[]=number&setname[]=number" 같은 해시를 뱉어.

두 번째 인수로 옵션 해시를 지정하여 사용자 정의 함수 정의 방법을 정의 할 수도 있습니다 ( ). 가능한 옵션은 다음과 같습니다 key가 (자신의 정규 표현식을 사용), attribute 이 (id 아닌 다른 속성을 테스트) 및 expression (part1[] 당신이 원하는대로와 를 대체합니다).

serialize가 빈 문자열을 반환하면 id 속성에 밑줄이 포함되어 있는지 확인하십시오. 그들은 형식이어야합니다 : 예를 들어 "set_number", 아이디와 3 요소 목록 foo_1, foo_5는, foo_2이 foo[]=1&foo[]=5&foo[]=2로 직렬화합니다 속성. 밑줄, 등호 또는 하이픈을 으로 설정하면 번호와 집합을 구분할 수 있습니다. 예 : foo=1 또는 foo-1 또는 foo_1 모두 은 foo[]=1으로 직렬화됩니다.

serialize는 당신이 필요로하는 것보다 더 않는 경우, .sortable('toArray') 당신에게 정렬에있는 각 요소의 id를 보관 유지하는 배열을 반환해야합니다.