वर्ग

Question

पर आधारित jQuery पुनरावृत्ति सूची आइटम कक्षा का उपयोग करके मेरी सूची आइटम को पुन: व्यवस्थित करने का एक आसान तरीका है?

मैं नीचे सूचीबद्ध अन्य सूची आइटमों के साथ पहले सूची में शीर्ष पर उन वस्तुओं को प्रदर्शित करने के लिए एक वर्ग निर्दिष्ट करना चाहता हूं।

<ul class="order-me"> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
    <li class="featured">featured content</li> 
    <li class="">normal content</li> 
    <li class="featured">featured content</li> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
</ul> 

वांछित उत्पादन:

<ul class="order-me"> 
    <li class="featured">featured content</li> 
    <li class="featured">featured content</li> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
    <li class="">normal content</li> 
</ul> 

धन्यवाद!

Answer 1

आप .featured तत्वों को उनके ul पर सूची के शीर्ष पर ले जाने के लिए पूर्ववत कर सकते हैं। इस प्रयास करें:

$('.featured').prependTo('.order-me'); 

Example fiddle

Answer 2

@Rory McCrossan के जवाब देने के लिए जोड़ने के लिए, मैं नेविगेशन बटन के साथ इसे सुलझाने के लिए क्षमता को जोड़ दिया है

$("ul.order-nav li").click(function() { 
    // Find the Data attribute from unordered list [.order-nav] 
    var sortClass = '.' + $(this).data('sort-by'); 
    // Prepent the [li] with matching class to top of [ul] 
    $(sortClass).prependTo('.order-me'); 
}); 

Here is the Fiddle