क्या जावास्क्रिप्ट या शुद्ध jQuery के साथ <li> तत्वों को पुन: व्यवस्थित करना संभव है। तो अगर मेरे पास निम्न की तरह एक मूर्ख सूची है:पुनर्विक्रेता सूची तत्व - jQuery?
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Cheese</li>
</ul>
मैं सूची तत्वों को चारों ओर कैसे स्थानांतरित करूं? Foo के साथ सूची तत्व से पहले सूची तत्व को Cheese के साथ डालें या Bar के बाद Foo पर जाएं।
क्या यह संभव है? यदि हां, तो कैसे?
var ul = $("ul");
var li = ul.children("li");
li.detach().sort();
ul.append(li);
यह एक सरल है उदाहरण जहां <li> नोड्स द्वारा क्रमबद्ध किया जाता है कुछ डिफ़ॉल्ट क्रम में। मैं ली नोड्स से जुड़े किसी भी डेटा/घटनाओं को हटाने से बचने के लिए अलग-अलग कॉल कर रहा हूं।
आप सॉर्ट करने के लिए एक कस्टम तुलनित्र का उपयोग करने के लिए एक फ़ंक्शन पास कर सकते हैं।
li.detach().sort(function(a, b) {
// use whatever comparison you want between DOM nodes a and b
});
jQuery ui पर एक नज़र sortable
बहुत अच्छा है, मुझे उपयोगकर्ता को रिसॉर्ट करने में सक्षम होने की आवश्यकता नहीं है, मैं सिर्फ यह जानना चाहता हूं कि मैं इसे प्रोग्रामेटिक रूप से कर सकता हूं या तो jQuery या सिर्फ जावास्क्रिप्ट का उपयोग कर सकता हूं। – Alex
आह मैं देखता हूँ! वास्तव में आपके प्रश्न –
कुछ इस तरह है?
var li = $('ul li').map(function(){
return this;
}).get();
$('ul').html(li.sort());
मैं कुछ खो गया था आप कुछ इस तरह चाहते हो सकता है ...
$('ul#list li:first').appendTo('ul#list'); // make the first to be last...
$('ul#list li:first').after('ul#list li:eq(1)'); // make first as 2nd...
$('ul#list li:contains(Foo)').appendTo('ul#list'); // make the li that has Foo to be last...
से यह नहीं मिला है कि यह लाइन '$ ('ul # list li: first') काम करने लगती है। ('Ul # list li: eq (1)'); ' –
यहाँ इस कार्यक्षमता के साथ सहायता करने के लिए एक jQuery प्लगइन है: कोई उन्हें एक बार में/नीचे कुछ सूची एक कदम ऊपर ले जाकर तत्वों को पुन: व्यवस्थित करने के लिए देख रहा है, तो http://tinysort.sjeiti.com/
अच्छा और सरल प्लगइन –
...
//element to move
var $el = $(selector);
//move element down one step
if ($el.not(':last-child'))
$el.next().after($el);
//move element up one step
if ($el.not(':first-child'))
$el.prev().before($el);
//move element to top
$el.parent().prepend($el);
//move element to end
$el.parent().append($el);
यही कारण है कि मैं stackoverflow प्यार करता हूँ। धन्यवाद @alexg – iggy2012
jQuery के बारे में मेरी पसंदीदा चीजों में से एक यह है कि छोटे छोटे ऐड-ऑन इतनी जल्दी लिखना कितना आसान है।
यहां, हमने एक छोटा ऐड-ऑन बनाया है जो चयनकर्ताओं की एक श्रृंखला लेता है, और लक्षित तत्वों के बच्चों को आदेश देने के लिए इसका उपयोग करता है।
// Create the add-on
$.fn.orderChildren = function(order) {
\t this.each(function() {
\t \t var el = $(this);
\t \t for(var i = order.length - 1; i >= 0; i--) {
\t \t \t el.prepend(el.children(order[i]));
\t \t }
\t });
\t return this;
};
// Call the add-on
$(".user").orderChildren([
\t ".phone",
\t ".email",
\t ".website",
\t ".name",
\t ".address"
]);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="user">
\t <li class="name">Sandy</li>
\t <li class="phone">(234) 567-7890</li>
\t <li class="address">123 Hello World Street</li>
\t <li class="email">[email protected]</li>
\t <li class="website">https://google.com</li>
</ul>
<ul class="user">
\t <li class="name">Jon</li>
\t <li class="phone">(574) 555-8777</li>
\t <li class="address">123 Foobar Street</li>
\t <li class="email">[email protected]</li>
\t <li class="website">https://apple.com</li>
</ul>
<ul class="user">
\t <li class="name">Sarah</li>
\t <li class="phone">(432) 555-5477</li>
\t <li class="address">123 Javascript Street</li>
\t <li class="email">[email protected]</li>
\t <li class="website">https://microsoft.com</li>
</ul>समारोह सरणी के माध्यम से पीछे की ओर लूप और .prepend इसलिए का उपयोग करता है किसी को अचयनित तत्वों को समाप्त करने के धकेल दिया जाता है।
यह वही था जो मैं ढूंढ रहा था - @SandyGifford साझा करने के लिए धन्यवाद –
मुझे यह नहीं मिल रहा है काम करने के लिए .. क्या कोई इसे jsfiddle पर कार्रवाई में डेमो कर सकता है? – Irfan
मेरे लिए ठीक काम करता है। यहां jsfiddle उदाहरण है: http://jsfiddle.net/Afbrt/ –
सुंदर समाधान। मुझे जिस चीज की जरूरत थी।शुक्रवार दोपहर –