jQuery'yi Dinamik Olarak Alfabetik Olarak Eklemek için Kullanma

Question

Yan yana iki sıralı liste var.

Bir listeden bir düğüm aldığımda, alfabetik olarak diğer listeye eklemek istiyorum. Yakalama, sadece bir elemanı alıp listenin tamamını yenilemeden diğer listeye geri koymak istiyorum.

Garip olan şey, sağdaki listeye eklediğimde iyi çalışıyor, ancak soldaki listeye geri eklediğimde, sipariş hiçbir zaman doğru çıkmıyor.

Ayrıca, her şeyi bir dizide okumaya çalıştım ve sadece çocuklar() yöntemi görüntülendikleri sırada bir şeyler döndürmüyorsa, ancak yine de aynı sonuçları alıyorum. Sonra, her bir öğe köknar) (.text olsun bir dizi üzerine koyardı

<ol> 
<li ingredient_display="Enriched Pasta" ingredient_id="101635" local_counter="1"> 
    <span class="rank">1</span> 
    <span class="rounded-corners"> 
      <span class="plus_sign">&nbsp;&nbsp;+&nbsp;&nbsp;</span> 
      <div class="ingredient">Enriched Pasta</div> 
      <span class="minus_sign">&nbsp;&nbsp;-&nbsp;&nbsp;</span> 
    </span> 
</li> 
</ol> 

Answer 1

Bu sorunu çözmek için jsFiddle with working code'u oluşturdum. bu yüzden, ben kısa olması açısından HTML'nizi soyunmuş

$(".ingredient").click(function(){ 
    var element = $(this); 
    var added = false; 
    var targetList = $(this).parent().siblings(".ingredientList")[0]; 
    $(this).fadeOut("fast", function() { 
     $(".ingredient", targetList).each(function(){ 
      if ($(this).text() > $(element).text()) { 
       $(element).insertBefore($(this)).fadeIn("fast"); 
       added = true; 
       return false; 
      } 
     }); 
     if(!added) $(element).appendTo($(targetList)).fadeIn("fast"); 
    }); 
});​ 

:

<ol class="ingredientList"> 
    <li class="ingredient">Apples</li> 
    <li class="ingredient">Carrots</li> 
    <li class="ingredient">Clams</li> 
    <li class="ingredient">Oysters</li> 
    <li class="ingredient">Wheat</li> 
</ol> 
<ol class="ingredientList"> 
    <li class="ingredient">Barley</li> 
    <li class="ingredient">Eggs</li> 
    <li class="ingredient">Millet</li> 
    <li class="ingredient">Oranges</li> 
    <li class="ingredient">Olives</li> 
</ol>​ 

ve jQuery: Ben jsFiddle uzak gelecekte göbek gider ihtimale karşı burada da kodu dahil ediyorum Kodumu sizinkiyle eşleştirmek için değiştirmek isteyeceksiniz. Ayrıca, kullanıcı tanımlı nitelikler kullanacaksanız (geçerli HTML olmayan ve herhangi bir tarayıcı tarafından resmi olarak desteklenmeyen ... yine de herhangi bir şeye zarar vermese de ... muhtemelen), önekini "veri- "HTML5 Custom Data Attribute belirtimine uymak için. Yani "ingredient_id" "data-ingredient_id" olur. HTML5'in son haline getirilmediği için henüz herhangi bir güncel tarayıcıda desteklenmezken, kendi özniteliklerinizi tanımlamaktan daha güvenli ve daha sağlamdır. HTML5 tamamlandığında, özellikleriniz tam olarak desteklenecektir.

Edit - John yorumlarda belirtildiği gibi, UTF-8 karakterlerini desteklemeniz gerekiyorsa bu çalışmaz. Bu durumda String.prototype.localeCompare()'u kullanmanız gerekir (tarayıcının belgelere göre desteklediğinden emin olun).

$(".ingredient").click(function(){ 
    var element = $(this); 
    var added = false; 
    var targetList = $(this).parent().siblings(".ingredientList")[0]; 
    $(this).fadeOut("fast", function() { 
     $(".ingredient", targetList).each(function(){ 
      if ($(this).text().localeCompare($(element).text()) > 0) { 
       $(element).insertBefore($(this)).fadeIn("fast"); 
       added = true; 
       return false; 
      } 
     }); 
     if(!added) $(element).appendTo($(targetList)).fadeIn("fast"); 
    }); 
}); 

Here is an updated Fiddle implementing localeCompare: Demek kodu şöyle görünecektir.

Answer 2

:

İşte

function moveNode(node, to_list, order_by){ 

    rightful_index = 1; 
    $(to_list) 
     .children() 
     .each(function(){ 
      var ordering_field = (order_by == "A") ? "ingredient_display" : "local_counter"; 

      var compA = $(node).attr(ordering_field).toUpperCase(); 
      var compB = $(this).attr(ordering_field).toUpperCase(); 
      var C = ((compA > compB) ? 1 : 0); 
      if(C == 1){ 
       rightful_index++; 
      } 
     }); 

    if(rightful_index > $(to_list).children().length){ 
     $(node).fadeOut("fast", function(){ 
      $(to_list).append($(node)); 
      $(node).fadeIn("fast"); 
     }); 
    }else{ 
     $(node).fadeOut("fast", function(){ 
      $(to_list + " li:nth-child(" + rightful_index + ")").before($(node)); 
      $(node).fadeIn("fast"); 
     }); 
    } 

} 

gibi benim html görünür: Burada

benim jQuery olduğunu diziyi sıralayın, ardından SORTED'in dizinlerinin UNSORTED ile eşleştiği her öğeyi taşıyın.

ve bunun için kodu yazmak ve şu anda test etmek için çok tembelim :) ama sadece ona yaklaşma tarzımın bir düşüncesi.