jquery - 使用 jQuery 动态创建元素

Question

我正在基于从处理程序返回的数组在 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 函数，但不太确定如何实现它。有人能指出我正确的方向吗？

Answer 1

我会从这样的事情开始:

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 进行搜索。我认为您也会受益于像 mustache.js 这样的 JS 模板引擎。