양식 요소 배열에서 특정 삭제 된 요소의 색인을 얻으려면 어떻게해야합니까?

Question

는 I이 HTML을 가지고

는 DOM은이 같은 각 버튼의 텍스트 (HTML)를 저장로드 된

<div class="content vertical-gradient"> 
    <div id="button_id0" class="button services rounded-corners trans-effect"><a class="title-text" href="index.php?services">Tjänster</a></div> 
    <div id="button_id1" class="button prices rounded-corners trans-effect"><a class="title-text" href="index.php?prices">Priser</a></div> 
    <div id="button_id2" class="button about-me rounded-corners trans-effect"><a class="title-text" href="index.php?aboutme">Om mig</a></div> 
</div> 

: lastHtml이 전역 배열로 정의

$(".button").each(function(index) {    
     //Store all texts (html) from buttons for later user with drag/drop  
     lastHtml[index] = $(this).html();    
} 

.

일부 상황에서는 버튼의 html을 변경하고 싶지만 드래그 앤 드롭하여 어딘가에 원래 상태로 되돌리고 싶습니다. 그러므로 dom이 변수 lastHtml-array에로드 될 때 텍스트 (html)를 저장합니다.

드롭 다운 섹션에서 단추 인덱스를 ID로 검색합니다 (요소 번호 버튼 (useButtonId)에 의해 인덱스 번호가 검색됩니다. 예를 들어, button_id1은 인덱스 1을 반환하고, button_id2는 삭제 될 때 index2를 반환합니다). (I 계정의 ID를 취할 필요없이 내가 좋아하는 얼마나 많은 버튼을 가지고 싶어하지만 난 여전히 모든 HTML-값을 저장할 :

$(".content").droppable({ 
    accept: ".button.dragme", //Must come from this dragged element 
    drop: function(event, ui) {               
     //Show ordinary text for button      
     var id = $(ui.helper).prop("id"); 
     var idArray = id.split("_id");     //array of split between _id, example: [0] = button, [1] = 2       
     var useButtonId = idArray[1]; 
     $(ui.helper).addClass("trans-effect").removeClass("dragme").removeClass("ui-draggable").html(lastHtml[useButtonId]); 
    } 
} 

는하지만 내가 정말 원하는 것은이 같은 것입니다 dom이로드되고 특정 버튼을 드래그하여 놓을 때 원래 상태로 복원 될 때).

<div class="content vertical-gradient"> 
    <div name="button[]" class="button services rounded-corners trans-effect"><a class="title-text" href="index.php?services">Tjänster</a></div> 
    <div name="button[]" class="button prices rounded-corners trans-effect"><a class="title-text" href="index.php?prices">Priser</a></div> 
    <div name="button[]" class="button about-me rounded-corners trans-effect"><a class="title-text" href="index.php?aboutme">Om mig</a></div> 
</div> 

나는 생각한다!? index()을 사용할 수는 있지만 실제로 어떻게 알아낼 수는 없습니다. 나는 다음과 같이 시도했다 :

$(ui.helper).index()) 
$('.content').index(ui.helper)) 

그러나 둘 중 어느 것도 올바른 색인을 반환하지 않는 것으로 보인다.

$(this).html($(this).data('lasthtml')); 

대안 btn-index 같은 속성 또는 데이터 저장소를 만들 :

Answer 1

.data()

var $btns=$('.button') 
$btns.each(function(){ 
    var $btn=$(this); 
    $btn.data('lastHtml', $btn.html()); 
}); 

data() 게터와 세터 모두 너무 재설정한다 이용한 소자 자체에 HTML을 저장하기 쉬울 수 있습니다 저장된 배열을 참조하려면

$btns.each(function(index) {    
     //Store all texts (html) from buttons for later user with drag/drop  
     lastHtml[index] = $(this).html(); 
     $(this).attr('btn-index',index)/* or*/.data('btn-index',index);   
}); 

당신의 droppable 예제 내에서만 사용한다면, 요소를 저장하는 것이 가장 쉬운 방법처럼 보입니다.