जोड़ कई jQuery

का उपयोग कर आइटम मैं इस मार्कअप के साथ शुरू:जोड़ कई jQuery

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

प्रत्येक बटन पर क्लिक करें मैं बिल्कुल ऊपर एक के रूप में, लेकिन एक वृद्धि की जाती सूचकांक के साथ एक और अनुभाग जोड़ना चाहते हैं।

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

तो कुछ मुद्दों:

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

मैं इस जावास्क्रिप्ट का उपयोग करने के कोशिश कर रहा हूँ

लेबल काम करता है जोड़, लेकिन मेरे क्लोन पाठ बॉक्स नहीं करता है।

लेबल में कोई टेक्स्ट नहीं है। मुझे इसके लिए संपत्ति नहीं मिल रही है। क्या कोई मुझे बता सकता है कि यह क्या है?

मैं यह नहीं समझ सकता कि लेबल और टेक्स्टबॉक्स को एक div और span में कैसे लपेटें। यदि मैं

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

यह वास्तविक लेबल के बजाय [ऑब्जेक्ट HTMLLabelElement] आउटपुट करता है। यदि मैं उन्हें कई संलग्न विवरणों में विभाजित करने का प्रयास करता हूं, तो यह स्वयं div और span को समाप्त करता है। मैं jQuery/जावास्क्रिप्ट के लिए नया हूं, इसलिए मुझे पूरा यकीन नहीं है कि मैं क्या गलत कर रहा हूं।

स्रोत

2009-10-23 Brandon

उदाहरण पूरे ब्लॉक क्लोनिंग (लेकिन एक आइटम वर्ग को जोड़ने), क्योंकि मुझे लगता है कि यह भविष्य के लिए और अधिक मजबूत है (यदि आप किसी आइटम उदाहरण के लिए एचटीएमएल बदल) और लेबल के पाठ से निपटने:

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

स्रोत

2009-10-23 21:35:21

यह बढ़िया काम करता है, सिवाय इसके कि गिनती बढ़ी नहीं जा रही है। – Brandon

ओह, कभी नहीं। Div पर कक्षा के बजाय एक आईडी का इस्तेमाल किया। अब महान काम करता है। धन्यवाद। – Brandon

हां, गणना 'आइटम' वर्ग के साथ तत्व की संख्या है। –

मुझे लगता है कि सिंक में परिवर्तनीय रखने पर निर्भर होने के बजाय मुझे मौजूदा नंबर से मौजूदा नंबर को निकालने का कोई तरीका मिल जाएगा। साथ ही, मुझे लगता है कि आपको अपनी इच्छित रोकथाम प्राप्त करने के लिए बस अपने परिशिष्ट को घोंसला करना होगा।

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

स्रोत

2009-10-23 20:41:21 tvanfosson

के लिए धन्यवाद उत्तर। मैंने आपके कोड को आजमाया लेकिन यह मार्कअप उत्पन्न करता है:

Name #1

इसमें एक स्व-समाप्त अवधि है और कोई टेक्स्टबॉक्स नहीं है। – Brandon

इसके अलावा, काउंटर बढ़ता नहीं जा रहा है। क्या .replace में पहले तर्कों के बारे में भी उद्धरण है? – Brandon

मैंने इस अवधि के बाद लेबल और इनपुट को जोड़ने के बारे में नहीं सोचा था। मैंने div और span के निर्माण को अलग करने के लिए अद्यतन किया है और उन्हें उचित क्रम में जोड़ दिया है। – tvanfosson

"क्या गलत है," यदि आप देशी डोम कॉल, jQuery, और कुछ और मिश्रण कर रहे हैं के साथ शुरू करने के लिए (मैं कोई सुराग नहीं क्या <%= Items.Count - 1 %> है -, पीएचपी शायद)। मैं वह अकेला अकेला छोड़ दूंगा, क्योंकि ऐसा लगता है कि यह आपके लिए काम कर रहा है। अन्यथा, यदि आप jQuery का उपयोग करने जा रहे हैं, तो जितना संभव हो सके अपने तरीकों का उपयोग करने के लिए प्रयास करें और चिपके रहें।

लेबल के पाठ के लिए "संपत्ति" केवल वैल्यू है, जो jQuery value() विधि द्वारा प्राप्त/सेट है। मैं जानता हूँ कि संलग्न पाठ, एक jQuery वस्तु, या किसी DOM तत्व ले जा सकते हैं

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

, लेकिन मैं व्यक्तिगत रूप से साथ यह सब करना पसंद:

लेबल संलग्न करने के लिए, मैं आप इसे पसंद करते हैं की सलाह देते हैं तार। यदि आप नहीं चाहते हैं, तो आप यह कर सकते हैं:

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

और इसी तरह।

कारण यह है कि

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

आप हार नहीं मानी है कि तुम क्या चाहते थे है आप श्रृंखलाबद्ध कर रहे हैं कि जावास्क्रिप्ट तार है, जो (जावा) की तरह स्वचालित रूप से श्रृंखलाबद्ध से पहले तार करने के लिए वस्तुओं में परिवर्तित कर देंगे साथ वस्तुओं।

मैं इस शेष उत्तर को अपूर्ण कर रहा हूं क्योंकि tvanfosson के उत्तर को इसे कवर करना चाहिए।

स्रोत

2009-10-23 20:46:05

उत्तर के लिए धन्यवाद। मुझे नहीं पता था कि मुझे jquery के साथ मूल डोम मिश्रण करने का अनुमान नहीं था, मैं वास्तव में इस अन्य SO प्रश्न का पालन कर रहा था http://stackoverflow.com/questions/953415/how-to- गतिशील-add-a-div-using - एक गाइड के रूप में, यह jquery का उपयोग किया लेकिन नियमित जावास्क्रिप्ट में तत्व बनाया। – Brandon

ओह, और कुछ और वास्तव में सी # था। – Brandon

यह वास्तव में "नहीं माना जाता" चीज़ नहीं है। कुछ भी वास्तव में तोड़ नहीं होगा। हालांकि, ओवरलैपिंग कार्यक्षमता प्रदान करने वाले 2 अलग-अलग एपीआई से मिश्रण मिश्रण से बचने के लिए यह बेहतर अभ्यास है। और यदि आप पहले ही jQuery का उपयोग कर रहे हैं, तो इसे तब तक क्यों न लें जब तक आप कर सकें? पुन: "कुछ और" - tvanfosson की सलाह लें और जावास्क्रिप्ट का उपयोग करके 'गिनती' के मूल्य की गणना करें। –

अपना एचटीएमएल बनाने के लिए एक फ़ंक्शन का उपयोग करें; यदि संरचना सरल है, एक स्ट्रिंग के रूप में यह कोडांतरण आसान है:

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

स्रोत

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

यह एक नया div बनाने oldDiv से HTML हड़पने, और दो regex के लिए [सूचकांक] और #number की जगह प्रदर्शन करेंगे क्षेत्रों। मैंने इसका परीक्षण नहीं किया है, लेकिन इसे कुछ संशोधनों के साथ काम करना चाहिए।

स्रोत

2009-10-23 20:48:44

जोड़ कई jQuery

उत्तर

संबंधित मुद्दे