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

Answer 2

のようなJSのテンプレートエンジンの恩恵を受けると思う： コードのボタンを押すと、入力フィールドが に充填されている場合、それがあれば、それはチェックします空であればポップアップで警告します 空でない場合は、入力フィールドの値を受け取り、チェックボックスを作成し、チェックボックスの隣に入力の値を入力します。

フォームの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

これらの要素を一度に1つずつ表示したいですか？または、ページの読み込み時に配列から動的に作成するだけですか？最後の場合

：

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（）.....