jQuery를 사용하여 목록에 동적으로 삽입하기

Question

두 개의 정렬 된 목록이 서로 옆에 있습니다.

노드를 하나의 목록에서 제거 할 때 다른 목록에 사전 순으로 삽입하고 싶습니다. 이 캐치는 전체 목록을 새로 고치지 않고 하나의 요소 만 빼고 다른 목록에 다시 넣고 싶습니다.

이상한 점은 오른쪽 목록에 삽입하면 제대로 작동하지만 왼쪽 목록에 다시 삽입하면 순서가 올바르게 나오지 않는다는 것입니다.

나는 배열에 모든 것을 읽으려고 시도했는데, children() 메서드가 표시되는 순서대로 항목을 반환하지 않을 경우를 대비하여 정렬했지만 여전히 동일한 결과를 얻습니다. 그때, 각 요소 전나무의)합니다 (는 .text를 얻을 배열에 넣어 것

<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

이 문제를 해결하기 위해 jsFiddle with working code을 만들었습니다. 그래서, 내가 간결성을 위해 HTML을 제거

$(".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>​ 

와 jQuery를 : 나는 jsFiddle는 먼 미래에 배꼽을가는 경우를 대비뿐만 아니라 여기에 코드를 포함하고있다 귀하의 코드와 일치하도록 코드를 수정해야합니다. 또한 사용자 정의 된 속성 (유효한 HTML이 아니며 모든 브라우저에서 공식적으로 지원되지 않는 ... 사용자가 정의한 특성을 사용하려는 경우 ...)에도 불구하고 "data- "을 사용하여 HTML5 Custom Data Attribute 사양을 준수합니다. 그래서 "ingredient_id"는 "data-ingredient_id"가됩니다. HTML5는 아직 완성되지 않았기 때문에 현재 브라우저에서는 아직 지원되지 않지만 자체 속성을 정의하는 것보다 안전하고 강력합니다. HTML5가 완성되면 속성이 완전히 지원됩니다.

편집 - 의견에서 John이 지적했듯이 UTF-8 문자를 지원해야하는 경우에는 작동하지 않습니다. 이 경우 String.prototype.localeCompare()을 사용해야합니다 (브라우저가 설명서대로 지원하는지 확인하십시오). 그 코드는 다음과 같이 보일 것입니다 :

$(".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.

Answer 2

:

여기

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

} 

이처럼 내 html로 보이는 것입니다 : 여기

내 jQuery를하다 , 배열을 정렬 한 다음 SORTED의 색인이 UNSORTED와 일치하는 각 요소를 이동하십시오.

나는 코드를 작성하고 테스트하기에는 너무 게으르다. 그러나 접근하는 방법을 생각하면된다.