[英]Optimal Method of Changing Order of Elements using jQuery
鑒於以下內容:
<a id="moveElementUp">Move Up</a>
<a id="moveElementDown">Move Dowm</a>
<div id="elementHolder">
<a id="element-1">1</a>
<a id="element-2">2</a>
<a id="element-3">3</a>
<a id="element-4">4</a>
</div>
<script type="text/javascript">
function reOrder (el){
// Change IDs of Elements to be Sequential
}
$('#moveElementUp').click(function(e){
// Move Clicked Element Up One Spot in List
reOrder();
});
$('#moveElementDown').click(function(e){
// Move Clicked Element Down One Spot in List
reOrder();
});
</script>
使用jQuery改變元素順序和更改所有元素的ID以維持順序的最佳(和最快)方法是什么?
任何幫助將不勝感激!
這將允許您任意重新排列項目。 但是,它將刪除錨標記之間的空格。 你可以通過在錨標簽之間添加空格來解決這個問題(就像我在這里做的那樣: http : //jsfiddle.net/FqwDc/1/ ),或者使用嵌套的div來代替。
var $sel; // anchor last clicked on
var prefixstr = "element-";
$('a[id^="'+prefixstr+'"]').click(function(e) {
$sel = $(this);
});
$('#moveElementUp').click(function(e) {
// Move Clicked Element Up One Spot in List
$sel.prev().before($sel);
changeIDs($('#elementHolder'));
});
$('#moveElementDown').click(function(e) {
// Move Clicked Element Down One Spot in List
$sel.next().after($sel);
changeIDs($('#elementHolder'));
});
function changeIDs($j) { // renumber the IDs
$j.children('a').each(function(i) {
$(this).attr('id',prefixstr+i);
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.