在删除后用jQuery删除空白空间可选项目
问题描述:
我有两个有序列表,用户可以在它们之间移动项目。我正在使用jQuery UI的可选择他们两个。问题是,当我从列表中间移动项目时,它留下了一个空白空间。我如何根据列表中实际有多少项目来缩减列表?在删除后用jQuery删除空白空间可选项目
HTML
<ol id="allUnits">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ol>
<input id="arrowRight" type="image" alt="Move item to right" src="<%= Url.Content("~/Content/Images/arrowRight.png")%>" />
<input id="arrowLeft" type="image" alt="Move item to left" src="<%= Url.Content("~/Content/Images/arrowLeft.png")%>" />
<ol id="productUnits">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ol>
jQuery的
$().ready(function() {
$("#allUnits").selectable();
$("#productUnits").selectable();
$('#arrowRight').click(function() {
return !$('#allUnits .ui-selected').remove().appendTo('#productUnits').removeClass(".ui-selected");
});
$('#arrowLeft').click(function() {
return !$('#productUnits .ui-selected').remove().appendTo('#allUnits').removeClass(".ui-selected");
});
});
答
好了,似乎现在的工作。也许这是某种CSS或空间问题,但突然它有效!让我们忘记这个问题...