jQuery.after에서 예상치 못한 결과가 발생했습니다.

Question

<select>에 여러 항목을 선택할 수있는 약 70 개의 항목이있는 응용 프로그램이 있습니다.

사용자가 소스 목록과 대상 목록 사이를 드래그/드롭 할 수있는 두 가지 목록으로 동작을 바꾸려고합니다. 초기 선택은 동작을 반영해야합니다.

여러 페이지에서 동작을 재사용해야하기 때문에 일반 페이지로 만들기 위해 노력하고 있습니다. 때로는 같은 페이지에서 여러 번 사용합니다.

<div style="border: solid 1px red; overflow:auto"> 
    <select name="lst1" multiple="multiple" id="lst1" class="go"> 
     <option value="1">Element N°1</option> 
     <option value="2">Element N°2</option> 
     <option selected="selected" value="3">Element N°3</option> 
     <option value="4">Element N°4</option> 
     <option value="5">Element N°5</option> 
    </select> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $(".go").each(function (index, el) { 
      var source = document.createElement("ul"); 
      var target = document.createElement("ul"); 
      $(el).after(source); 
      $(el).after(target); 
      $(source).addClass("sourceItems"); 
      $(target).addClass("targetItems"); 
      $(el + "option:selected").each(function (index2, sub) { 
       var item = document.createElement("li"); 
       item.textContent = $(sub).text(); 
       $(target).append(item); 
      }); 
      $(el + "option:not(:selected)").each(function (index2, sub) { 
       var item = document.createElement("li"); 
       item.textContent = $(sub).text(); 
       $(source).append(item); 
      }); 

      $(source).sortable({ connectWith : target}); 
      $(target).sortable({ connectWith : source }); 
     }); 
    }); 

</script> 

<style type="text/css">  
.sourceItems, .targetItems { list-style-type: none; float:left; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 200px; border: solid 1px black; } 
.sourceItems li, .targetItems li { margin: 5px; padding: 5px; width: 180px; height: 12px; cursor: move; } 
</style> 

이 코드는 생산 예상치 못한 결과 : :이 "대상"목록의 생성

내가 지금 무엇을 가지고

은 (내가 읽을 수 있도록 항목의 실제 수를 감소) DOM은 좋아 보인다 :

<ul class="targetItems ui-sortable"> 
<li>Element N°3</li> 
<li>Element N°7</li> 
<li>Element N°8</li> 
<li>Element N°14</li> 
<li>Element N°20</li> 
<li>Element N°15</li> 
<li>Element N°21</li> 
</ul> 

"소스"목록에서 생성 된 DOM은 엉망입니다 (각 요소에 페이지 DOM이 포함되어 있습니다).

<li> 
    .sourceItems, .targetItems { list-style-type: none; float:left; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 200px; border: solid 1px black; } 
    .sourceItems li, .targetItems li { margin: 5px; padding: 5px; width: 180px; height: 12px; cursor: move; } 
</li><li> 

</li><li></li><li> 
    .sourceItems, .targetItems { list-style-type: none; float:left; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 200px; border: solid 1px black; } 
    .sourceItems li, .targetItems li { margin: 5px; padding: 5px; width: 180px; height: 12px; cursor: move; } 

    Element N°1 
    Element N°2 
    Element N°3 
    Element N°4 
    Element N°5 
    Element N°6 
    Element N°7 
    Element N°8 
    Element N°9 

... 

Element N°3Element N°7Element N°8Element N°14Element N°15Element N°20Element N°21Element N°23Element N°27Element N°29Element. 

잘못된 것을 볼 수 없습니다. 나는 누군가가 내게이 문제의 근원을 지적 해 주었으면 좋겠다.

 var source = document.createElement("ul"); 
     var target = document.createElement("ul"); 
     $(el).after(target); 
     $(el).after(source); 

: 나 소스 및 대상 요소 생성 순서를 반대로하면 http://jsfiddle.net/gsYHb/

[편집] 문제가 다른 명부에 발생 여기

문제를 보여 jsfiddle 인 이 경우

은 지저분한 대상 목록입니다.

Answer 1

http://jsfiddle.net/stevebeauge/gsYHb/6/에서 볼 수 있듯이 문제를 해결할 수있었습니다.

$(this + "option:not(:selected)") 선택자가 전체 페이지를 반환했기 때문입니다.

이 코드를 $(this).children("option:not(:selected)")으로 바꾸면 스크립트가 작동합니다 (다른 부 수정 사항)