jquery sort dom 요소

DIV를 클릭하면 div 요소가 생기고이 DIV의 "selected"클래스를 추가합니다. "selected"클래스가있는 DIV는 .each()로 이동합니다. 마지막으로 추가하여이 요소를 정렬 할 수 있습니까? 예를 들어jquery sort dom 요소

나는 내가 싶어 341 선택하면 341 는 여기를보십시오 내 코드

<!DOCTYPE html> 
<html> 
    <head> 
     <style>.active{display: inline;margin:0 10px;border:1px solid #000;cursor: pointer;}</style> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
    </head> 
    <body> 
     <div id="content"> 
      <div class="row"> 
       <div class="nred"></div><div class="active">1</div><div class="active">2</div><div class="active">3</div><div class="active">4</div><div class="active">5</div><div class="active">6</div><div class="active">7</div><div class="active">8</div> 
      </div> 
      <div id="bileti"></div> 
     </div> 
<script> 
    $(".row").hover(
     function() { 
      $(this).children("div.active").toggleClass('bounce'); 
      $(this).children("div.nred").toggleClass('izbranred'); 
     } 
    ); 

    $("div.active").click(function() { 
     $(this).toggleClass('selected'); 
     document.getElementById("bileti").innerHTML=""; 

     $(".selected").each(function(){ 
      var place=$(this).html(); 
      document.getElementById("bileti").innerHTML+=place; 
     }); 
    }); 
</script> 

    </body> 
</html>

출처

2012-10-05 Bugaloo

입니다 :

var place = ''; 
$(".selected").each(function(){ 
    place += this.innerHTML; 
}); 
document.getElementById("bileti").innerHTML = place;

를 그러나 당신의 각각의 방법은 자신의 위치에 따라 요소를 선택 DOM 결과가 항상 134처럼 정렬되므로 span 요소를 추가하고 selected 클래스가없는 경우 제거 할 수 있습니다. 대신에 (당신이 DOM 순서의 요소를 제공하는 클래스마다 다시 선택 것이다) $(".selected").each를 사용

$("div.active").click(function() { 
    $(this).toggleClass('selected'); 
    if ($(this).hasClass('selected')) { 
     $("#bileti").append('<span>' + this.innerHTML + '</span>'); 
    } else { 
     $("#bileti span:contains(" + this.innerHTML + ")").remove(); 
    } 
});

http://jsfiddle.net/MW2wH/

출처

2012-10-05 22:22:59 undefined

왜 downvote? – undefined

나는 편집을보기 전에 내 대답을 쓰는 동안 downvoted. downvote를 제거하기 위해 보이지 않는 편집을 원하니? – Paulpro

@ ascii-lime 아니, 괜찮아. :), 고마워. – undefined

, 배열에서 선택한 div의 추적 :

(function(){ 

    var selected = []; 

    $("div.active").click(function(){ 
     var i = $.inArray(this, selected); 

     if(i >= 0){ 
      // Already in array, so remove it 
      $(this).removeClass('selected'); 
      selected.splice(i, 1); 
     }else{ 
      // Not in array, so add it 
      $(this).addClass('selected'); 
      selected.push(this); 
     } 

     document.getElementById("bileti").innerHTML = ""; 

     // Iterate through the array 

     $(selected).each(function(){ 
      var place = $(this).html(); 
      document.getElementById("bileti").innerHTML += place; 
     }); 
    }); 

})();

다음을 최적화 할 수도 있습니다.

$(selected).each(function(){ 
    var place = $(this).html(); 
    document.getElementById("bileti").innerHTML += place; 
});

루프 할 요소가 많은 경우 innerHTML에 추가하여 DOM을 계속 업데이트하므로 코드가 상당히 느립니다. 모든 한 경우

document.getElementById("bileti").innerHTML = "";

: 당신은 다음 또한 라인을 제거 할 수 있습니다

var places = ""; 
$(selected).each(function(){ 
    places += $(this).html(); 
}); 
document.getElementById("bileti").innerHTML = places;

: 단지 HTML 문자열을 구축하고 루프 후 DOM에 배치하는 훨씬 빨리 될 것입니다 이러한 변경 사항 전체 스크립트가됩니다 :

$(".row").hover(
    function(){ 
     $(this).children("div.active").toggleClass('bounce'); 
     $(this).children("div.nred").toggleClass('izbranred'); 
    } 
); 

(function(){ 

    var selected = []; 

    $("div.active").click(function(){ 
     var i = $.inArray(this, selected); 

     if(i >= 0){ 
      // Already in array, so remove it 
      $(this).removeClass('selected'); 
      selected.splice(i, 1); 
     }else{ 
      // Not in array, so add it 
      $(this).addClass('selected'); 
      selected.push(this); 
     } 

     var places = ""; 
     $(selected).each(function(){ 
      places += $(this).html(); 
     }); 
     document.getElementById("bileti").innerHTML = places; 

    }); 

})();

JSFiddle Demo

출처

2012-10-05 22:28:17 Paulpro

10x 도움을 – Bugaloo

+1 좋은 답변. – undefined

jquery sort dom 요소

답변

관련 문제