使用jQuery動態創建元素

我正在基於處理程序返回的數組構建jQuery中的複選框項目列表。使用jQuery動態創建元素

包含的元素是.listContainer元素，然後我想添加的每個動態元素都採用.listContainerItem元素的形式。根據創建它的數組項目，每個項目將具有複選框值和標籤。

<div class="listContainer"> 
    <div class="listContainerItem"> 
     <input type="checkbox" value="1" /> 
     <div class="listContainerItemLabel">Checkbox 1</div> 
    </div> 
</div>

在數組傳遞給它的函數處，創建它的最有效方法是什麼？我一直在試圖完成它，但很快就會遇到主要的性能問題。

function AddItemToListContainer(item) { 
    var currentItems = $j("#listContainerAvailable .listContainerItem"); 
    if ($j.grep(currentItems, function (e) { return $j(e).find(":checkbox:first").val() == item.Id; }).length === 0) { 
     labelDiv = $j("<div />").addClass("listContainerItemLabel").html(item.Text); 
     itemToAdd = $j("<div />").addClass("listContainerItem").append("<input type=\"checkbox\" value=\"" + item.Id + "\" />").append(labelDiv); 
     currentItems.append(itemToAdd); 
    } 
}

我看了.map函數，但不太清楚如何實現它。有人能指引我朝着正確的方向嗎？

來源

2013-03-04 Stewart Alan

作爲一個說明：'.append（「」）'可以是'.append（''）'這只是更容易閱讀和調試。 – insertusernamehere 2013-03-04 12:14:42

您是否一次獲得物品清單，您是否可以替換整套複選框，還是隻能在任何時候添加一些新物品？ – insertusernamehere 2013-03-04 12:18:18

我有一個單獨的函數，首先從不在數組中的DOM中刪除任何東西，所以我需要做的就是檢查每個項目是否已經在DOM中表示過，如果沒有添加它。 – 2013-03-04 12:26:19

我會像這樣開始：

var $container = $j('#listContainerAvailable'); 
var checkboxes = {}; 

function AddItemToListContainer(item) { 
    if (checkboxes[item.Id]) return false; 

    checkboxes[item.Id] = true; 

    var $item = $j('<div />', { 
     'class': 'listContainerItem', 
    }).appendTo($container); 

    $j('<input />', { 
     'type': 'checkbox', 
     'value': item.Id 
    }).appendTo($item); 

    $j('<div />', { 
     'class': 'listContainerItemLabel', 
     'text': item.Text 
    }).appendTo($item); 
}

只要在創建頁面，沒有這些元素的存在，你可以將它們添加到一個哈希表，而不是通過DOM搜索。我想你也想從JS模板引擎受益像mustache.js

來源

2013-03-04 12:25:43 Blender

這會送你在正確的方向：當按下代碼的按鈕，它會檢查輸入的字段在被填充，如果它是清空它會彈出提醒您如果它不是空的，它將獲取輸入字段的值，創建一個複選框並將輸入值放在複選框旁邊。

HTML形式的

<form name="formName" id="listContainerItem"> 
    <input id="newinput" type="text" value=""/><button id="button">Add new rule</button> <br /> 
    <input type="checkbox" value="1" /><span class="listcontainerItemLabel" />Checkbox 1 <br /> 
</form>

的Javascript

$(#button).click(function() { 
function addLine(e) { 
     e.preventDefault(); 
     var x = document.getElementById('newinput').value; 
     if(x == '') { 
      alert('not filled in') 
     } else { 
      $('#listContainer').append('<input type="checkbox" value="1" /><span class="listcontainerItemLabel" />'+x+ '<br />') 
     } 
    }

}）;

記得document.getElementById('newinput')也可以寫成這樣：$('#newinput')

所有你要做的就是改變什麼將被附加了一下您的需求。祝你有個美好的一天

來源

2013-03-04 14:26:44

你想讓這些元素一次出現一個嗎？或者只是在頁面加載時從數組動態創建？

在過去的：

HTML

<div class="listContainer"> 
     <div class="listContainerItem"></div> 
    </div>

和jQuery

var array = ['1', '2', '3', '4', '5']; 

$.each(array, function (index, value) { 
    $(".listContainerItem").append('<input type="checkbox" value="' + value + '" /> <div   class="listContainerItemLabel">Checkbox ' + value + '</div>'); 
});

http://jsfiddle.net/jeremythuff/HEKjk/

而一些。點擊事件，可以給你的第一個效果

來源

2013-03-05 04:33:27 Jeremythuff

您可以使用多種方式動態創建....

$("#elementid").after("<input type='checkbox'></input><span></span>; 

$("#elementid").before("<input type='checkbox'></input><span></span>; 

$("#elementid").append("<input type='checkbox'></input><span></span>; 

$("#elementid").prepend("<input type='checkbox'></input><span></span>;

像明智可以使用insertAfter（），的insertBefore（），appendTo（），prependTo（）.....

來源

2014-07-29 11:26:54

使用jQuery動態創建元素

回答

相關問題