JQuery/JS를 사용하여 한 목록에서 다음 목록으로 div를 이동하십시오.

Question

두 목록을 추가하고 제거 할 수 있도록 두 목록이 있습니다. 시작 목록의 형식은, 그 안에 1 2,000 변수에서 anywher을 가질 수

내가 첫 번째 목록에서 제거, 다음 목록에있는 모든 체크 바르를 이동할

<div class="notadded" id="X"><input type="checkbox" />Varname and varlabel</div> 

.

2,000 개의 항목을 이동시킬 수 있다면이 방법이 가장 좋습니다. 또한 그것들을 옮길 때, 나는 어떤 복제물도 갖고 싶지 않고 varname의 사전 순으로 보존하기를 원하지 않는다.

어쨌든 내가 원하는대로 html을 조정할 수도 있습니다.

Answer 1

좋아, 나는 당신이 원하는 것을 맞춰 내려고 노력하고있다. 그래서, jQuery를 사용하여이 코드를 살펴 :

HTML :

<div id="sourceList"> 
    <div class="notadded" id="1"><input type="checkbox" />Varname and varlabel 1</div> 
    <div class="notadded" id="2"><input type="checkbox" />Varname and varlabel 2</div> 
    <div class="notadded" id="3"><input type="checkbox" />Varname and varlabel 3</div> 
    <div class="notadded" id="4"><input type="checkbox" />Varname and varlabel 4</div> 
    <div class="notadded" id="5"><input type="checkbox" />Varname and varlabel 5</div> 
    <div class="notadded" id="6"><input type="checkbox" />Varname and varlabel 6</div> 
    <div class="notadded" id="7"><input type="checkbox" />Varname and varlabel 7</div> 
    <div class="notadded" id="8"><input type="checkbox" />Varname and varlabel 8</div> 
    <div class="notadded" id="9"><input type="checkbox" />Varname and varlabel 9</div> 
</div> 

<input id="moveBtn" type="button" value="Move them!"/> 
<input id="removeBtn" type="button" value="Remove them!"/> 

<div id="targetList"></div> 

자바 스크립트 :

function move(sourceSelector, targetSelector) { 
    var selectedItens = $(sourceSelector + " .notadded input:checked"); 
    selectedItens.attr("checked", false); 
    $(targetSelector).append(selectedItens.parent()); 
} 

$(function() { 
    $("#moveBtn").click(function(){ 
     move("#sourceList", "#targetList"); 
    }); 

    $("#removeBtn").click(function(){ 
     move("#targetList", "#sourceList"); 
    }); 
}); 

jsFiddle : http://jsfiddle.net/davidbuzatto/Fnxp2/

이 빨리 한 정도로인가?

Answer 2

대규모로 성능이 얼마나 좋을지 모르겠지만 두 항목 모두 2000 항목으로 구성되어 있지만 첫 번째 항목 만 처음 표시되는 경우 어떻게 될지 알 수 없습니다.

체크 박스를 수정하고 제출 한 후에 스타일을 변경하여 표시하거나 숨길 수 있습니다. 저의 유일한 관심사는 과도한 양의 DOM 원소를 가지지 만, 2000 년은 이미 많이 있습니다. 이 방법의 장점은 클래스 추가/제거 이외의 DOM 조작이 적어 두 목록의 요소 순서를 유지한다는 부가적인 이점이 있다는 것입니다. here

이 도움이 희망을 만들어 새로운 DOM 요소가 없습니다 있도록

나는 많은 다윗의 바이올린을 빌려하지만 적응.