मैंने एक साधारण फ़ाइल अपलोड किया जहां ड्रैग और ड्रॉप आईडी पर 4 इनपुट फ़ील्ड (फ़ाइल नाम, वैकल्पिक ग्रंथ) फ़ोरैच क्लोन करना पसंद है, मैंने अलग-अलग तरीकों की कोशिश की। लेकिन समस्या यह है कि इसे जितनी बार चाहिए, उससे कहीं अधिक बार क्लोन किया गया।

Jsfiddle पर मेरे उदाहरण में मैंने 5 फाइलों के साथ अनुकरण किया, लेकिन इसे 4 बार के बजाय ~ 15 बार क्लोन किया गया।

$('button').click(function(){
  var  lol = 5;

  for (var i = 0; i < lol; i++) {			
    if(i > 0){
     var $newCustomer = $('#clonemulti').clone();
      $newCustomer.removeAttr('id');

      $newCustomer.insertAfter( ".clonemulti" );	 
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clonemulti" id="clonemulti">	  						
    <input type="text"  class="filenameauto" name="filename[]" placeholder="" title="Dateiname" maxlength="20" required>

      <input type="text" placeholder="Alt. Text (de)" name="alttext[]" maxlength="50" required>
      <input type="text" placeholder="Alt. Text (it)" name="alttext[]" maxlength="50" required>
      <input type="text" placeholder="Alt. Text (en)" name="alttext[]" maxlength="50" required>

    <br/><br/>
</div>	
<button>clone</button>
1
delato468 30 अप्रैल 2019, 17:43

1 उत्तर

सबसे बढ़िया उत्तर

समस्या इसलिए है क्योंकि .insertAfter(".clonemulti") प्रत्येक मौजूदा .clonemulti तत्व के बाद नई पंक्तियां जोड़ रहा है।

आपको जो चाहिए उसे प्राप्त करने के लिए चयनकर्ता को बदलें ताकि आप उस तत्व के अंतिम उदाहरण के बाद उन्हें सम्मिलित कर सकें:

$newCustomer.insertAfter(".clonemulti:last");

यह भी ध्यान दें कि जब आप लूप में i से 1 इनिशियलाइज़ कर सकते हैं तो आपकी if (i > 0) स्थिति बेमानी है। यहाँ अद्यतन JS का पूरा उदाहरण दिया गया है:

$('button').click(function() {
  var lol = 5;

  for (var i = 1; i < lol; i++) {
    var $newCustomer = $('#clonemulti').clone();
    $newCustomer.removeAttr('id');
    $newCustomer.insertAfter(".clonemulti:last");
  }
});
3
Rory McCrossan 30 अप्रैल 2019, 14:47