jQuery排序不工作

我有一個jQuery的可選列表裏面的手風琴。當用戶點擊一個項目時，它會出現在他們選擇的項目列表中，這是可排序的。列表中出現許多列作爲默認列，每個選中的項目在手風琴中顯示爲綠色。我的問題是，排序列表中有兩個單詞的訂單項不可排序，但包含一個單詞的項目是。我無法弄清楚爲什麼。有什麼想法嗎？jQuery排序不工作

這裏是我的小提琴：http://jsfiddle.net/kmbonin82/NkgC2/9/

HTML：

<h3>List 1</h3> 
<ul class="list"> 
    <li id="Country">Country</li> 
    <li id="Region">Region</li> 
    <li id="Location_Name">Location Name</li> 
    <li id="Location_Start">Location Start</li> 
</ul> 
<h3>List 2</h3> 
<ul class="list"> 
    <li id="Contract_Start">Contract Start</li> 
    <li id="Contract_Status">Contract Status</li> 
    <li id="Contract">Contract</li> 
</ul> 

<p id="feedback"> 
<span>You've selected items:</span>  
    <ul id="select-result"> 
     <li id="Region">Region</li> 
     <li id="Location Name">Location Name</li> 
     <li id="Country">Country</li> 
     <li id="Contract Status">Contract Status</li> 
    </ul>  
</p>

JS：

$(function() { 
     $(".list").selectable({ 
      stop: function() { 
       var result = $("#select-result"); 

       $(".ui-selected", this).each(function() { 
        $(this).css('background-color', '#669966'); 
        $(this).css('color', '#FFFFFF'); 
        result.append('<li id="' + $(this).text() + '">' + $(this).text() + '</li>'); 
        sortColumns(); 
       }); 
      } 
     }); 
     sortColumns(); 
    }); 


    $(function() { 
     $("#accordion").accordion({ 
      collapsible: true, 
      autoHeight: false 
     }); 
    }); 

    $(function() { 
     $("#select-result li").each(function (index) { 
      var thisID = $(this).attr('id'); 
      thisID = thisID.replace(/ /g, '_'); 
      document.getElementById(thisID).style.background = '#669966'; 
      document.getElementById(thisID).style.color = '#FFFFFF'; 
      sortColumns(); 
     }); 
    }); 

    function sortColumns() { 
     $(function() { 
      $("#select-result") 
      .sortable({ 
       handle: ".handle", 
       over: function() { 
        removeIntent = false; 
       }, 
       out: function() { 
        removeIntent = true; 
       }, 

       beforeStop: function (event, ui) { 
        if (removeIntent == true) { 
         var thisID = ui.item.text(); 
         thisID = thisID.replace(/ /g, '_'); 
         ui.item.remove(); 
         document.getElementById(thisID).style.background = '#FFFFFF'; 
         document.getElementById(thisID).style.color = '#000000'; 
        } 
       } 
      }) 
      .find("li") 
      .addClass("ui-corner-all") 
      .prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>"); 
     }); 
    }

來源

2013-04-09 KMBonin

'位置名稱' 和 '合同狀態' 不排序，因爲它們的ID值錯誤。你們之間有空間。

 <li id="Location Name">Location Name</li> 
     <li id="Contract Status">Contract Status</li>

更新演示：http://jsfiddle.net/NkgC2/10/

獎勵：

a）您是預未決股利的方式是不是正確的方式。如果你看到你的html代碼，在你選擇它的每個項目後，爲每個列表項目添加一個額外的div

b）不用調用sortable（）函數幾次（它甚至在選擇任何項目之前都會調用3次） jquery'on'方法將api綁定到不存在的元素。

來源

2013-04-09 19:48:18 jainchetan

jQuery排序不工作

回答

相關問題