用jquery重命名特定範圍內的元素

我在頁面上有多個自動生成的表單。它們以特定的方式等被命名爲：用jquery重命名特定範圍內的元素

形式-0-重量，形式-1-重量，形式-2-重量等

<ul> 
    <li> 
    <input id="id_form-0-weight" type="text" name="form-0-weight"> 
    <a class="deleteIngredient" href="">x</a> 
    </li> 
    <li> 
    ....more forms 
    </li> 
</ul>

用戶可以添加和刪除的形式。如果表單被刪除，其餘的應該重新命名以保持順序。例如「form-1-weight」被刪除>>「form-2-weight」將被重命名爲「form-1-weight」。表單的總數存儲在名爲TOTAL_FORMS的隱藏字段中。

我試圖用一個簡單的循環實現這一點。問題是，刪除後的所有表單都會得到相同的名稱。例如如果我刪除形式-2的重量，下面所有的形式獲取名稱形式-2的重量，而不是2，3，4等

$(".deleteIngredient").click(function(e){ 
    e.preventDefault(); 

    var delete = $(this).closest('li'); 

    name = delete.children('input').attr("name"); 
    count = name.replace(prefix,''); 
    count = name.replace("-weight",''); 
    var formCount = parseInt($("#TOTAL_FORMS").val())-1; 
    delete.remove(); 

    for (var i = parseInt(count); i<=formCount; i++){ 
     var newName = "form-"+i+"-weight"; 
     $("#id_form-"+(i+1)+"-weight").attr("name",newName); 
    } 
});

我想它是與我如何選擇元素在循環內部，因爲當我只使用變量「我」而不是「newName」時，它按預期工作。

來源

2013-12-20 user1210456

問題是你沒有正確初始化我。這是因爲「計數」不包含可解析爲parseInt函數的條件下，整數的字符串，我建議你看看這裏：

w3Schools/parseInt

注意：如果第一字符不能轉換爲數字，parseInt（）返回NaN。

當您爲「count」指定字符串時，實際上是將字符串「form-i」插入到變量中。
你應該做的是這樣的：

count = name.replace(prefix,''); 
count = count.replace("-weight",'');

還應該重命名你的「刪除」變量「表」或其他任何描述性的名稱，如刪除是在JavaScript保留字，也是一種行動，因此並不適合作爲對象的名稱。不要忘記更改項目的id屬性，以便它符合新名稱。

作爲一個說明，你應該考慮通過JavaScript或jQuery的一些教程，Tuts+ learn jQuery in 30 days是我建議。

來源

2013-12-20 16:22:03 LiorST

我的第一個衝動就是解決這個不同的方式。

Live Demo

var $ul = $('ul'); 

// Add a new ingredient to the end of the list 
function addIngredient() { 
    var $currentIngredients = $ul.children(); 
    var n = $currentIngredients.length; 
    var $ingredient = $('<li>', { 
     html: '<input type="text" /> <a href="#" class="delete-ingredient">x</a>' 
    }); 

    $ul.append($ingredient); 
    renameIngredientElements(); 
} 

// Rename all ingredients according to their order 
function renameIngredientElements() { 
    $ul.children().each(function (i, ingredient) { 
     var $ingredient = $(ingredient); 
     var $input = $ingredient.find('input'); 
     var name = 'form-' + i + '-weight'; 

     $input 
      .attr('id', 'id_' + name) 
      .attr('name', name); 
    }); 
} 

// Delete an ingredient 
function deleteIngredient($ingredient) { 
    $ingredient.remove(); 
    renameIngredientElements(); 
} 

// Bind events 
$('.add-ingredient').on('click', addIngredient); 

$ul.on('click', '.delete-ingredient', function (event) { 
    var $ingredient = $(event.currentTarget).closest('li'); 
    deleteIngredient($ingredient); 

    event.preventDefault(); 
});

至於爲什麼你的特定代碼被打破，它看起來像user2421955只是打我給它。

來源

2013-12-20 16:23:09 Nate

用jquery重命名特定範圍內的元素

回答

相關問題