Question

我有一个简单的列表，它包含1行或更多行。

我有一个JavaScript变量，表示应该引发整个列表的行数。请注意，我不打算交换列表中的行。

例如，如果我将其提升为2行，则“第三”将位于“first”原来的位置，而“first”将位于两行以上。

理想情况下，我想要一个jQuery解决方案而不是本机JavaScript解决方案。感谢

<ul id="myList">
 <li>First</li>
 <li>Second</li>
 <li>Third</li>
</ul>

Answer 1

选中演示：http://jsfiddle.net/n6UhP/1/

这假定您的列表绝对定位。

var liHeight = $('#myList li:first').height(); 

function moveUpBy(_numLIs) {
    $('#myList').animate({
        top: ($('#myList').offset().top - _numLIs * liHeight) + 'px'
    }, 'fast');
}

function moveDownBy(_numLIs) {
    $('#myList').animate({
        top: ($('#myList').offset().top + (_numLIs + 1) * liHeight) + 'px'
    }, 'fast');
}

Answer 2

如果您尝试通过手动互动更改列表项的顺序，我认为jQuery Sortable将是最佳选择。

试试这个：

http://jqueryui.com/sortable

Answer 3

如果您将主UL设置为相对位置，则可以使用jQuery position方法查找每个列表项的位置，并根据需要调整负边距。

function moveList(itemIndex) {
    var top = 0 - $('#myList li').eq(itemIndex).position().top;
    $('#myList').animate({
        'margin-top': top
    })

}

DEMO：http://jsfiddle.net/HcUhC/1/

演示使用具有overflow: hidden的固定高度父级，可以更改不同视觉的过流

使用jQuery向上或向下移动列表的位置

3 个答案: