向上和向下移動Ul Li中的項目

-1

我有一個Ul li並單擊向上和向下按鈕我想移動以移動li元素上下。這是在頁面上呈現的html。向上和向下移動Ul Li中的項目

我已經嘗試了鏈接Can I use jQuery to easily shift li elements up or down?中提到的解決方案，但它不適用於我。

 <ul id="ul_li_SubCategories" style="width:200px;" class="chargeCapturetable margin0"> 
    <li sequence="1" title="Category 1" class="liEllipsis" value="9"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 1</a></li> 
    <li sequence="2" title="Category 3" class="liEllipsis" value="11"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 3</a></li> 
    <li sequence="4" title="Category 4" class="liEllipsis" value="12"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 4</a></li> 
    <li sequence="5" title="Category 6" class="liEllipsis" value="22"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 6</a></li> 
    <li sequence="6" title="Category 5" class="liEllipsis" value="13"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 5</a></li> 
    <li sequence="7" title="Category 7" class="liEllipsis" value="55"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 7</a></li> 
<li sequence="99999" title="Category 8" class="liEllipsis" value="62"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 8</a></li></ul>

來源

2015-06-25 Gaurav Sachdeva

[我可以使用jQuery輕鬆地將li元素向上或向下移動嗎？]（http://stackoverflow.com/questions/1485138/can-i-use-jquery-to-easily-shift-li-elements-上或下） – TheBalco

我試過這個鏈接..但它沒有爲我工作。 –

http://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element –

您可以嘗試如下操作：

$('.upbutton').on('click', function() { 
    var hook = $(this).closest('.liEllipsis').prev('.liEllipsis'); 
    var elementToMove = $(this).closest('.liEllipsis').detach(); 
    hook.before(elementToMove); 
}); 
$('.downbutton').on('click', function() { 
    var hook = $(this).closest('.liEllipsis').next('.liEllipsis'); 
    var elementToMove = $(this).closest('.liEllipsis').detach(); 
    hook.after(elementToMove); 
});

https://jsfiddle.net/16sebrjq/

如果你想使用外部的按鈕，選定li元素移動，嘗試這樣的事情：

$('.liEllipsis').on('click', function() { 
    $('.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

$('.upbutton').on('click', function() { 
    var $currentElement = $('#ul_li_SubCategories .selected'); 
    moveUp($currentElement); 
}); 

$('.downbutton').on('click', function() { 
    var $currentElement = $('#ul_li_SubCategories .selected'); 
    moveDown($currentElement); 
}); 

var moveUp = function ($currentElement) { 
    var hook = $currentElement.prev('.liEllipsis'); 
    if (hook.length) { 
     var elementToMove = $currentElement.detach(); 
     hook.before(elementToMove); 
    } 
}; 

var moveDown = function ($currentElement) { 
    var hook = $currentElement.next('.liEllipsis'); 
    if (hook.length) { 
     var elementToMove = $currentElement.detach(); 
     hook.after(elementToMove); 
    } 
};

https://jsfiddle.net/16sebrjq/1/

來源

2015-06-25 09:56:31

我認爲事件發生在點擊按鈕上。在這種情況下，「this」不會指向按鈕。 –

是的。這是假設你的按鈕在裏面，因此我正在尋找最接近的li，並將其移動。 –

不是..按鈕不是放在同一個裏面。它在不同的部門。 @Arathi Sreekumar –

您可以使用insertAfter（），並期待爲序列/操作序列

在你的函數，你應該這樣做

var previousObject = $(this).prev('li'); 
$(this).insertBefore(previousObject); 


var nextObject = $(this).next('li'); 
$(this).insertAfter(nextObject);

沒有測試

。但是這樣的事情應該起作用。（這是點擊列表對象）

來源

2015-06-25 09:44:44 Kbi

你可以分享一些示例代碼嗎？ –

看這個jsfiddle

使用此jQuery代碼，我只是移動元素倒在這個例子中：

$.fn.moveUp = function() { 
    before = $(this).prev(); 
    $(this).insertBefore(before); 
} 

$.fn.moveDown = function() { 
    after = $(this).next(); 
    $(this).insertAfter(after); 
} 

$('li').click(function() { 
    $(this).moveDown(); 
});

我剛從here

的例子

來源

2015-06-25 09:55:30 TheBalco

你可以試試這個

$(function(){ 
 

 
$('.glyphicon-arrow-up').on('click', function(e){ 
 
    e.preventDefault(); 
 
    var _this = $(this); 
 
    var _parent = _this.closest('ul'); 
 
    var _child = $(_parent).find('li'); 
 
    var selected= $(this).closest('li').index(); 
 
    jQuery($(_parent).children().eq(selected-1)).before(jQuery($(_parent).children().eq(selected))); 
 
    
 
}); 
 

 
$('.glyphicon-arrow-down').on('click', function(e){ 
 
    e.preventDefault(); 
 
    var _this = $(this); 
 
    var _parent = _this.closest('ul'); 
 
    var _child = $(_parent).find('li'); 
 
    var selected= $(this).closest('li').index(); 
 
    jQuery($(_parent).children().eq(selected+1)).after(jQuery($(_parent).children().eq(selected))); 
 
    selected=selected+1; 
 
}); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
\t <li>Sample 1 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li> 
 
\t <li>Sample 2 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li> 
 
\t <li>Sample 3 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li> 
 
\t <li>Sample 4 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li> 
 
\t <li>Sample 5 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li> 
 
\t <li>Sample 6 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li> 
 
\t <li>Sample 7 <span class="glyphicon-arrow-up">Up</span><span class="glyphicon-arrow-down">Down</span></li> 
 
</ul>

來源

2015-06-25 09:58:22 Butterfly

向上和向下移動Ul Li中的項目

回答

相關問題