動態安排的div使用jQuery

我有以下結構：動態安排的div使用jQuery

<div id="container"> 
<div id="someid1" style="float:right"></div> 
<div id="someid2" style="float:right"></div> 
<div id="someid3" style="float:right"></div> 
<div id="someid4" style="float:right"></div> 
</div>

現在someid是acually對於該分區的唯一ID。現在我收到一個有不同順序的數組，說someid 3,2,1,4，那麼我如何移動這些div來匹配使用jQuery的新訂單？

謝謝你的時間。

來源

2009-05-30 Alec Smart

我的插件版本 - Working Demo

注意到陣列和可選id前綴和重新排序陣列中的元素其ID的對應於（ID前綴）的順序+值。數組中沒有包含相應標識的元素的任何值都將被忽略，並且數組中的所有沒有id的子元素都將被刪除。從演示

jQuery的

$(function() { 
    $('#go').click(function() { 

    var order = $('#order').val() == ""? null: $('#order').val().split(","); 
    $('#container').reOrder(order, 'someid'); 
    }); 
}); 

(function($) { 

$.fn.reOrder = function(array, prefix) { 
    return this.each(function() { 
    prefix = prefix || ""; 

    if (array) {  
     for(var i=0; i < array.length; i++) 
     array[i] = $('#' + prefix + array[i]); 

     $(this).empty(); 

     for(var i=0; i < array.length; i++) 
     $(this).append(array[i]);  
    } 
    });  
} 
})(jQuery);

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>reOrder Demo</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; } 
div.style { width: 200px; height: 100px; border: 1px solid #000000; margin: 5px; } 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="someid1" class="style" style="background-color:green;">div1</div> 
<div id="someid2" class="style" style="background-color:blue;">div2</div> 
<div id="someid3" class="style" style="background-color:red;">div3</div> 
<div id="someid4" class="style" style="background-color:purple;">div4</div> 
</div> 
<p>Pass in a comma separated list of numbers 1-4 to reorder divs</p> 
<input id="order" type="text" /> 
<input id="go" type="button" value="Re-Order" /> 


</body> 
</html>

來源

2009-05-30 11:51:00

如果您擁有陣列中的所有內容，請從代碼中的包裝器div 容器中刪除所有內容。然後開始由一個將接收的div一個：

var v = $(ar[0]).append(ar[1]).append(ar[2]); 
$("#container").html(v);

如果不工作，然後看看this thread，討論有關相對於其他元素的定位元素。

來源

2009-05-30 10:58:56 TheVillageIdiot

[編輯]，這是測試和工程：

var order = [3,2,1,4]; 
var container = $("#container"); 
var children = container.children(); 
container.empty(); 
for (var i = 0; i < order.length; i++){ 
    container.append(children[order[i]-1]) 
}

第i-1是必要的，因爲你的排序開始於1，但陣列從0

由於JP和拉斯凸輪索引讓我再看一遍。

來源

2009-05-30 11:00:52

在您的循環中，'i'值將只是0,1,2,3而不是來自順序數組的值。相反，你需要container.append（children [order [i] -1]）; 隨意在這裏測試：http://code.google.com/apis/ajax/playground/#jquery – andreialecu 2009-05-30 11:12:23

在常規數組中使用for-in循環是一種不好的做法。 – James 2009-05-30 11:28:21

這裏

(function($) { 

$.fn.reOrder = function(array, prefix) { 
    return this.each(function() { 
    prefix = prefix || ""; 

    if (array) {  
     for(var i=0; i < array.length; i++) 
     array[i] = $('#' + prefix + array[i]); 

     $(this).empty(); 

     for(var i=0; i < array.length; i++) 
     $(this).append(array[i]);  
    } 
    });  
} 
})(jQuery);

代碼是一個jQuery少的解決方案：

function appendNodesById(parent, ids) { 
    for(var i = 0, len = ids.length; i < len; ++i) 
     parent.appendChild(document.getElementById(ids[i])); 
} 

appendNodesById(document.getElementById('container'), 
    ['someid4', 'someid2', 'someid3', 'someid1']);

來源

2009-05-30 12:00:10 Christoph

動態安排的div使用jQuery

回答

相關問題