如何使用不同的ID動態追加div

-1

我想在輸入類型文本中輸入值時複製同一節。 ID是（＃時間1）。小於0我想用不同的ID再次複製同一部分。我正在使用jquery ui作爲單選按鈕。如何使用不同的ID動態追加div

<div class="address-details"> 
    <div class="form-row"> 
     <div class="form-inner-field postcode"> 
      <label><span>Postcode</span></label> 
      <input type="text" value="" class="text-box post-code" id="postcode" placeholder="AB15XY" maxlength="8"> 
      <button class="addressbutton button button-white" disabled="disabled">Find Address</button> 
     </div> 
     <!-- <div class="help-message">Please enter your post code</div> --> 
     <div class="error-message"><strong>This field is mandatory</strong></div> 
    </div> 

    <div class="form-row"> 
     <div class="form-inner-field"> 
      <label><span>Type of occupancy</span></label> 
      <div class="radio radiobutton radioblock occupancy-blk clearfix"> 
       <input type="radio" id="radio1" class="radioown" name="OwnRental"> 
       <label for="radio1"><span>Own</span></label> 
       <input type="radio" id="radio2" class="radioown" name="OwnRental"> 
       <label for="radio2"><span>Rent</span></label> 
       <input type="radio" id="radio3" class="radioown" name="OwnRental"> 
       <label for="radio3"><span>Live with parents</span></label> 
      </div> 
     </div> 
     <div class="error-message"><strong><i class="fa fa-info-circle"></i>This field is mandatory</strong></div> 
    </div> 
    <div class="form-row small-form-row add-text-box how-long-u"> 
     <div class="form-inner-field clearfix"> 
      <label><span>Please enter how long you have lived at this address</span></label> 
      <div class="small-box"> 
       <input type="text" value="" class="text-box small-text-box number time-year" placeholder="" maxlength="2" id="time1"> 
       <label><span>Years</span></label> 
      </div> 
      <div class="small-box"> 
       <input type="text" value="" class="text-box number time-month" placeholder="" maxlength="2" id="time2"> 
       <label><span>Months</span></label> 
      </div> 
     </div> 
     <!--<div class="help-message">Please let us know in years & months, for how long you have lived at this address</div>--> 
     <div class="error-message"><strong>This field is mandatory</strong></div> 
    </div>     
</div>

來源

2016-02-12 achu

請儘量說出你的問題更清晰一點（使用適當的標點符號等），還發布你的JavaScript，我們不能幫你，如果你不告訴我們你已經做了什麼！ – Glubus

不能使用簡單的foreach嗎？ –

你想要複製哪一部分？來清除 –

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 

    $(document).ready(function() { 

     $('#time1').blur(function() { 
      var value = parseInt($(this).val(), 10); 

      if (value < 0) { 
       var $szAddress = $('.address-details').clone(); 

       $($szAddress).find('[id]').each(function() { 
        $(this).attr('id', $(this).attr('id')+'_' + $('.address-details').length) 
        if ($(this).attr('type') == 'radio') 
        { 
         $(this).attr('name', 'OwnRental_' + $('.address-details').length) 
         $(this).next('label').attr('for', $(this).attr('id')) 
        } 

       }); 
       $('.address-details').append($szAddress) 
      } 
     }); 
    }); 
</script> 
</head> 

<body> 

    <div class="address-details"> 
    <div class="form-row"> 
     <div class="form-inner-field postcode"> 
      <label><span>Postcode</span></label> 
      <input type="text" value="" class="text-box post-code" id="postcode" placeholder="AB15XY" maxlength="8"> 
      <button class="addressbutton button button-white" disabled="disabled">Find Address</button> 
     </div> 
     <!-- <div class="help-message">Please enter your post code</div> --> 
     <div class="error-message"><strong>This field is mandatory</strong></div> 
    </div> 

    <div class="form-row"> 
     <div class="form-inner-field"> 
      <label><span>Type of occupancy</span></label> 
      <div class="radio radiobutton radioblock occupancy-blk clearfix"> 
       <input type="radio" id="radio1" class="radioown" name="OwnRental"> 
       <label for="radio1"><span>Own</span></label> 
       <input type="radio" id="radio2" class="radioown" name="OwnRental"> 
       <label for="radio2"><span>Rent</span></label> 
       <input type="radio" id="radio3" class="radioown" name="OwnRental"> 
       <label for="radio3"><span>Live with parents</span></label> 
      </div> 
     </div> 
     <div class="error-message"><strong><i class="fa fa-info-circle"></i>This field is mandatory</strong></div> 
    </div> 
    <div class="form-row small-form-row add-text-box how-long-u"> 
     <div class="form-inner-field clearfix"> 
      <label><span>Please enter how long you have lived at this address</span></label> 
      <div class="small-box"> 
       <input type="text" value="" class="text-box small-text-box number time-year" placeholder="" maxlength="2" id="time1"> 
       <label><span>Years</span></label> 
      </div> 
      <div class="small-box"> 
       <input type="text" value="" class="text-box number time-month" placeholder="" maxlength="2" id="time2"> 
       <label><span>Months</span></label> 
      </div> 
     </div> 
     <!--<div class="help-message">Please let us know in years & months, for how long you have lived at this address</div>--> 
     <div class="error-message"><strong>This field is mandatory</strong></div> 
    </div>     
</div> 
</body> 

</html>

來源

2016-02-12 15:46:31 Aswathy

謝謝您的回覆shriya ..此代碼正在工作。但我也想根據輸入類型的廣播ID改變單選按鈕（for和name attr）。單選按鈕，我正在使用jquery ui插件。 – achu

改爲使用var $ szAddress = $（'。address-details'）。clone（）;我用var $ szAddress = $（'。address-details'）。html（）; – achu

代碼更新爲標籤屬性「名稱」和標籤「爲」屬性值 – Aswathy

如何使用不同的ID動態追加div

回答

相關問題