jQuery

Question

öğelerini kullanarak dinamik olarak oluşturma Öğeleri bir işleyiciden dönen bir diziye göre jQuery'de bir onay kutusu öğeleri listesi oluşturuyorum.

İçeren öğe aşağıda .listContainer öğesidir ve buna eklemek istediğim her dinamik öğe .listContainerItem öğesinin şeklini alır. Her bir öğe onay kutusu değerine sahip olacak ve onu oluşturan dizi öğesine göre etiketleyecektir.

dizisi kendisine geçti fonksiyonunun noktada

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

, bu yaratmanın en etkili yolu nedir? Bunu aşağıdaki gibi gerçekleştirmeye çalışıyorum, ancak hızlı bir şekilde önemli performans sorunlarıyla karşılaşıyorum.

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); 
    } 
} 

Ben .map işlevi baktım, ama oldukça nasıl bunu uygulamaya emin oldum. Birisi bana doğru yönde işaret edebilir mi?

Answer 1

böyle bir şey ile başlamak istiyorum:

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); 
} 

sürece sayfa oluştururken bu elemanların hiçbiri var oldukça, bunun yerine DOM üzerinden arama karma tablosuna ekleyebilirsiniz. Bu doğru yönde göndereceğiz ayrıca mustache.js

Answer 2

gibi JS şablon motoru için yararlı olacağını düşünüyorum: kodun düğmesine basıldığında giriş alanı doldurulmuş eğer varsa onu kontrol eder boş bir pop-up ile sizi uyaracaktır Eğer boş değilse, giriş alanının değerini alır, bir onay kutusu oluşturun ve onay kutusunun yanındaki girdinin değerini koyun. formun

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') da böyle yazılabilir hatırlayın: $('#newinput')

yapman gereken tüm ihtiyaçlarınızı biraz eklenecek edileceğini değiştirmek olduğunu. İyi şanslar iyi günler

Answer 3

Bu elemanların her seferinde bir tane görünmesini istiyor musunuz? veya sadece sayfa yükündeki bir diziden dinamik olarak oluşturulabilir mi? Geçen İçin

:

html

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

ve 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/

Ve bazı .click olaylar size ilk etkiyi verebilir

Answer 4

dinamik olarak oluşturmak için birçok yol kullanabilirsiniz ....bilge gibi

$("#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>; 

bir not olarak InsertAfter(), insertBefore() appendTo(), prependTo() .....