使用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动态创建元素

回答

相关问题