最佳方式相應

我有一個項目的名單列表：最佳方式相應

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

列表進行排序感謝jQuery的。然而，一旦我安排了我需要重新計算他們的位置的項目，即橙移動到頂部將等於10，蘋果然後等於20和香蕉30.

然後我需要通過這個數據在url中爲了我的服務器端腳本來處理。

當我提交時，能夠將更改後的列表值傳遞到URL中的最佳方式是什麼？

我的第一個想法是有一個帶有隱藏值的表單，所以當我處理列表時，它會將值作爲隱藏輸入添加到表單中，以便將數據傳遞到URL中。

來源

2010-12-06 Julio

文本字符串前面的值應該總是像`（$（this）.index（）+ 1）* 10`這樣的東西嗎？順便說一下，爲了便於訪問，我強烈建議將該數字包裝在另一個元素中，或許是一個「span」，以避免（否則不可避免的）正則表達式頭痛。 – 2010-12-06 17:12:12

每個項目之前的數字是否嚴格基於位置？

如果是這樣，排序完成後，您可以根據每個li元素替換內容。

這個URL如何包含列表文本有什麼關係嗎？

在下面我操作的假設，它可以全部追加列表的查詢字符串值。

有很短的方法來做到這一點，但希望冗長將有助於理解發生了什麼。

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

來源

2010-12-06 17:08:41

最佳方式相應

回答

相關問題