如何獲取表單元素數組中特定的下拉元素的索引？

Question

我有這樣的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> 

當DOM已經加載我保存從每個按鈕文本（HTML）是這樣的：

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

其中lastHtml被定義爲一個全局數組。

在某些情況下，我想更改按鈕的html，但是當我將其拖放到某處時，我想回到其原始狀態。因此，我將dom加載到變量lastHtml-array中時保存文本（html）。 （索引號由元素按鈕（useButtonId'）檢索，例如button_id1將返回索引1，button_id2將在返回索引2時被刪除）。

$(".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]); 
    } 
} 

但我真正想要的是這樣的：（我想有我多少按鍵喜歡，而不必採取賬號的ID，但我還是想保存所有的HTML值當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)) 

但他們都沒有返回正確的索引。

Answer 1

可能是更容易使用.data()

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

data()既是getter和setter所以重置存儲元件本身上的HTML：

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

可選地創建屬性或數據存儲等btn-index以參考您的存儲陣列

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

如果只在你的可投入的例子中使用它，存儲元素似乎是最簡單的方法去