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模板引擎中受益

Answer 2

这将向您发送正确的方向：按下代码按钮时，它将检查输入字段是否已填写如果它是空的，它会通过弹出窗口提醒你如果它不是空的，它将获取输入字段的值，创建一个复选框并将输入的值放在复选框旁边。

表单的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')

你所要做的就是根据你的需要改变附加的内容。祝你好运，祝你好运

Answer 3

您是否希望一次显示这些元素？或者只是在页面加载时从数组动态创建？

最后：

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/

一些.click事件可以给你带来第一个效果

Answer 4

您可以使用多种方式动态创建....

$("#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（）......

使用jQuery动态创建元素

4 个答案: