Dołączanie wielu elementów przy użyciu jQuery

Zacznę od tego znaczników:Dołączanie wielu elementów przy użyciu jQuery

<div> 
    <span> 
    <label for="Item[0]">Item #1</label> 
    <input type="text" value="" name="Item" id="Item[0]"/> 
    </span> 
</div>

Na każdego przycisku kliknij Chcę dodać kolejny rozdział dokładnie jak ten powyżej, ale z indeksem zwiększany.

<div> 
    <span> 
    <label for="Item[0]">Item #1</label> 
    <input type="text" value="" name="Item" id="Item[0]"/> 
    </span> 
</div> 
<div> 
    <span> 
    <label for="Item[1]">Item #2</label> 
    <input type="text" value="" name="Item" id="Item[1]"/> 
    </span> 
</div>

Próbuję użyć tego javascript:

$(document).ready(function(){ 

    var count = <%= Items.Count - 1 %>; 

    $('#AddItem').click(function(e) { 
     e.preventDefault(); 
     count++; 

     var tb = $('#Item[0]').clone().attr('id', 'Item[' + count + ']'); 

     var label = document.createElement('label') 
     label.setAttribute('For', 'Item[' + count + ']') 

     $('#ItemFields').append(label); 
     $('#ItemFields').append(tb); 
    }); 
});

Więc kilka kwestii:

Dołączanie prace na etykiecie, ale mój sklonowany tekstowe nie.

Etykieta nie zawiera tekstu. Nie mogę znaleźć takiej nieruchomości. Czy ktoś może mi powiedzieć, co to jest?

Nie mogę wymyślić, jak owinąć etykietę i pole tekstowe w div i span. Jeśli spróbuję, to zostanie wyprowadzona [obiekt HTMLLabelElement] zamiast faktycznej etykiety. Jeśli spróbuję podzielić je na wiele instrukcji append, samo kończy działanie div i span. Jestem nowy w jQuery/Javascript, więc nie jestem całkiem pewien, co robię źle.

Źródło

2009-10-23 Brandon

Przykład klonowania całego bloku (ale dodając klasę elementu), ponieważ myślę, że to bardziej wytrzymałe na przyszłość (jeśli zmienisz html dla elementu EG) i przenoszenia tekstu etykiety:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Demo</title> 
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#AddItem').click(function(e) { 
     e.preventDefault(); 

     var count = $('.item').length; 
     var id = 'Item[' + count + ']'; 
     var item = $('.item:first').clone(); 
     item.find('input:first').attr('id', id); 
     item.find('label:first').attr('for', id) 
      .html('Item #' + (1+count)); 
     item.appendTo('#ItemFields'); 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <input type="button" id="AddItem" value="Add" /> 
    <div id="ItemFields"> 
    <div class="item"> 
     <span> 
     <label for="Item[0]">Item #1</label> 
     <input type="text" value="" name="Item" id="Item[0]"/> 
     </span> 
    </div> 
    </div> 
</body> 
</html>

Źródło

2009-10-23 21:35:21

Działa to świetnie, ale liczba nie wzrasta. – Brandon

Ups, nevermind. Użył identyfikatora zamiast klasy na div. Działa teraz świetnie. Dzięki. – Brandon

Tak, liczba to liczba elementów z klasą "przedmiot". –

Myślę, że znalazłbym sposób na wyodrębnienie następnego numeru z istniejących w oznaczeniu zamiast polegania na utrzymywaniu zmiennej w synchronizacji. Poza tym myślę, że po prostu musisz odpowiednio zagnieżdżać swoje dodatki, aby uzyskać pożądane ograniczenie.

$(document).ready(function(){ 

    $('#AddItem').click(function(e) { 
     var count = $('[name=Item]:last').attr('id').replace(/Item\[/,'').replace(/\]/,''); 
     count = Number(count) + 1; 

     var newItemID = 'Item[' + count + ']'; 

     var tb = $('#Item[0]').clone(); 
     tb.attr('id', newItemID); 

     var label = $('<label for="' + newItemID + '">Item #' + count + '</label>'); 

     var container = $('<div></div>'); 

     $('<span></span>').append(label) 
          .append(tb) 
          .appendTo(container); 

     $('#ItemFields').append(container); 
     return false; 
    }); 
});

Źródło

2009-10-23 20:41:21 tvanfosson

Dzięki za odpowiedź. Wypróbowałem twój kod, ale generuje on znacznik:

Name #1

Ma samowyzwój i nie ma pola tekstowego. – Brandon

Również licznik nie zwiększa się. Czy pierwsze argumenty w .replace powinny również zawierać cytaty? – Brandon

Nie pomyślałem o tym, dołączając etykietę i wprowadzanie po rozpiętości. Zaktualizowałem, aby oddzielić tworzenie div i span i połączyć je we właściwej kolejności. – tvanfosson

Na początek „co się dzieje”, jesteś mieszanie rodzimych połączeń DOM, jQuery, a coś innego (nie mam pojęcia co jest <%= Items.Count - 1 %> - PHP, może). Zostawię to ostatnie w spokoju, ponieważ wygląda na to, że działa dla ciebie. W przeciwnym razie, jeśli zamierzasz używać jQuery, spróbuj trzymać się swoich metod w jak największym stopniu.

"Właściwość" dla tekstu etykiety to tylko wartość, którą pobiera/ustawia metoda jQuery value().

Aby dołączyć etykietę, polecam Ci to nie podoba:

$('#ItemFields').append('<label for=Item["' + count + ']">'+ '</label>')

wiem dołączyć mogą wziąć tekst, obiekt jQuery lub elementu DOM, ale ja osobiście wolę robić to wszystko z smyczki. Jeśli nie chcesz, możesz to zrobić:

$('#ItemFields').append($('<label></label>') 
    .attr('for', 'Item["' + count + ']') 
    .value('your label text here'));

i tak dalej.

Powodem że

$('#ItemFields').append('<div><span>' + label + tb + '</span></div>');

nie dać ci to, czego chciał, że jesteś łączenie obiektów JavaScript z ciągów, które (podobnie jak Java) będzie automatycznie konwertować obiekty do ciągów przed złączenie.

Pozostawiam resztę tej odpowiedzi niekompletną, ponieważ odpowiedź tvanfossona powinna ją pokrywać.

Źródło

2009-10-23 20:46:05

Dzięki za odpowiedź. Nie wiedziałem, że nie mam mieszać natywnego DOM z Jquery, faktycznie podążałem za tym innym pytaniem SO http://stackoverflow.com/questions/953415/how-to-dynamically-add-a-div-using -jquery jako przewodnik używał Jquery, ale stworzył elementy w zwykłym javascript. – Brandon

Aha, a coś innego było w rzeczywistości C#. – Brandon

To naprawdę nie jest rzecz "niepotrzebna". Nic tak naprawdę nie pęknie. Lepiej jednak jest unikać mieszania wywołań z 2 różnych interfejsów API, które zapewniają nakładanie się funkcji. A jeśli już korzystasz z jQuery, dlaczego nie wziąć go tak daleko, jak to możliwe? Re: "coś innego" - skorzystaj z porady tvanfosson i obliczyć wartość 'count' używając JavaScript. –

Użyj funkcji do zbudowania swojego html; Jeżeli konstrukcja jest prosta, montaż go jako ciąg jest łatwiejsze:

$(document).ready(function(){ 

    var count = <%= Items.Count - 1 %>; 

    $('#AddItem').click(function(e) { 
     e.preventDefault(); 
     count++; 

     $('#ItemFields').append(create_item(count)); 
    }); 


    function create_item(i) { 
     return $(['<div><span>' 
       ,'<label for="Item[', i, ']">Item #', i, '</label>' 
       ,'<input type="text" value="" name="Item" id="Item[', i ,']"/>' 
      ,'</span></div>'].join(''), document); 
    }; 
});

Źródło

2009-10-23 20:47:50 Brandon

var oldDiv = $('whatever');//Get div here somehow 
var newHTML = $(oldDiv).html(); 
newHTML.replace(/\[[0-9]+\]/g, '['+count+']'); 
newHTML.replace(/#[0-9]+/g, '#'+(count+1));  
var newDiv = $('<div></div>').html(newHTML);

Spowoduje to utworzenie nowego div, chwyć HTML z oldDiv i wykonać dwa regex zamiennik dla [Indeks], a #NUMBER obszary. Nie testowałem tego, ale powinno działać z kilkoma modyfikacjami.

Źródło

2009-10-23 20:48:44

Dołączanie wielu elementów przy użyciu jQuery

Odpowiedz

Powiązane problemy