गतिशील रूप से की व्यवस्था divs jQuery

मैं निम्नलिखित संरचना है का उपयोग करते हुए:गतिशील रूप से की व्यवस्था divs 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 कि div के लिए एक विशिष्ट आईडी है। अब मुझे एक सरणी मिलती है जिसमें अलग-अलग ऑर्डर 3,2,1,4 कहते हैं, फिर मैं इन divs को jQuery का उपयोग करके नए ऑर्डर से मिलान करने के लिए कैसे स्थानांतरित करूं?

आपके समय के लिए बहुत बहुत धन्यवाद।

स्रोत

2009-05-30 Alec Smart

मेरे प्लगइन संस्करण - Working Demo

एक सरणी और वैकल्पिक आईडी उपसर्ग ले जाता है और तत्वों जिसका आईडी की (आईडी उपसर्ग) आदेश के अनुरूप + सरणी के अंदर मूल्यों reorders। उस सरणी में कोई भी मान जिसके पास संबंधित आईडी वाला कोई तत्व नहीं है, उसे अनदेखा कर दिया जाएगा, और किसी भी बच्चे तत्व जिसमें सरणी के भीतर कोई आईडी नहीं है, हटा दी जाएगी। डेमो

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);

एचटीएमएल

<!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

उत्कृष्ट।मैंने ली के सूची में "प्लस/माइनस" ऑर्डरिंग सिस्टम रखने के लिए इसका इस्तेमाल किया था। आश्चर्यजनक रूप से अनुकूलित किया गया। –

अच्छा काम। यह आसान में आया था। –

आप कमाल हैं। धन्यवाद। – Joel

यदि आपके पास सरणी में सभी सामग्री है तो अपने कोड में रैपर div कंटेनर से सभी सामग्री हटा दें। फिर एक के द्वारा प्राप्त divs एक जोड़ना प्रारंभ करें:

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.

जेपी और रस कैम के लिए धन्यवाद इंडेक्स किए गए मुझे इसे फिर से देखने के लिए।

स्रोत

2009-05-30 11:00:52

अपने लूप में, 'i' मान केवल 0, 1, 2, 3 होगा और ऑर्डर सरणी के मान नहीं होंगे। इसके बजाय, आपको कंटेनर की आवश्यकता है .append (बच्चों [आदेश [i] -1]); यहां परीक्षण करने के लिए स्वतंत्र महसूस करें: http://code.google.com/apis/ajax/playground/#jquery – andreialecu

नियमित सरणी में इन-इन लूप का उपयोग करना बुरा अभ्यास है। – James

@ जे-पी तब अच्छा/बेहतर अभ्यास क्या है? –

यहाँ से

(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

गतिशील रूप से की व्यवस्था divs jQuery

उत्तर

संबंधित मुद्दे