如何获取表单元素数组中特定已删除元素的索引？

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-数组中时，我保存文本(Html)。

在drop部分，我通过ID检索按钮的索引(索引号由元素按钮(UseButtonId)，ex检索)。button_id1将返回索引1，button_id2将在删除时返回index2 )。

$( ".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值)。

<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()可能更容易将html存储在元素本身上。

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

data()既是getter，也是setter，因此要重置：

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

如果只在可丢弃的示例中使用元素，则存储元素似乎是最简单的方法。