가장 좋은 방법은 이에 따라

Question

나는 목록에있는 항목의 목록을 가지고 : jQuery를에

<ul id="myList">  
    <li>10 Apple</li> 
    <li>20 Banana</li> 
    <li>30 Orange</li> 
</ul> 

목록을 정렬 할 수 있습니다 감사합니다. 그러나 일단 Ive가 그들의 위치를 ​​다시 계산할 필요가있는 품목을 배열하면 즉 오렌지가 정상 10에 의하여 동등 할 것입니다, 사과는 그 때 20 및 바나나 30를 동등 할 것입니다.

나는 그 때 나의 서버 측을 위해 URL에있는이 자료를 통과 할 필요가있다 처리 할 스크립트.

내가 제출할 때 변경된 목록 값을 URL로 전달할 수있는 가장 좋은 방법은 무엇입니까?

내 첫 번째 생각은 숨겨진 값이있는 양식을 가지고 있기 때문에 목록을 처리 할 때 양식에 값을 숨겨진 입력으로 추가하여 URL에 데이터를 전달합니다.

Answer 1

각 항목 앞에있는 숫자는 엄밀히 말하면 위치에 맞습니까?

그렇다면 정렬이 완료되면 각 li 요소를 기반으로 콘텐츠를 바꿀 수 있습니다.

URL에 목록 텍스트가 어떻게 포함 되나요?

아래에서는 필자가 list의 쿼리 문자열 값을 추가 할 수 있다는 가정하에 작동했습니다.

이 작업을 수행하는 방법이 더 짧지 만, 자세한 내용을 이해하면 도움이 될 것입니다.

<script> 
    var listChanger = function() { 
    //updates the digits prepended to each item in list 
    //updates URL with text of list in querystring 

     //accumulates the text of each list item 
     var valueAccumulator = []; 

     //Operate of each item in myList 
     $('#myList li').each(function(index) { 

      //regular expression to strip initial digits 
      var reInitialDigits = /^\d+/; 

      //remove initial digits 
      var textWithoutDigits = $(this).text().replace(reInitialDigits,""); 

      //prepend new digits (index starts at 0, so add 1 then multiply by 10 to get desired number) 
      $(this).text(((index + 1) * 10) + textWithoutDigits); 

      //append text to accumulator 
      valueAccumulator.push($(this).text()); 
     }); 

     //querystring to strip everything after the querystring 
     var reQueryString = /\?list\=.*$/; 

     //placeholder 
     var linkWithoutQueryString = ''; 

     //remove querystring 
     linkWithoutQueryString = $('#myLink').attr('href').replace(reQueryString,''); 

     //change link to include URL encoded list of values 
     $('#myLink').attr('href',linkWithoutQueryString + "?list=" + encodeURI(valueAccumulator.join("|"))); 
    } 

    $(document).ready(function() { 
     //make the list sortable and each time the sorting stops, run the listChanger function 
     $("#myList").sortable({stop:listChanger}); 
    }); 
</script> 

<ul id="myList"> 
    <li>10 Apple 
    </li> 
    <li>20 Banana 
    </li> 
    <li>30 Orange 
    </li> 
</ul> 
<br /> 
<a id="myLink" href="mylink.html">mylink.html</a>