【问题标题】:How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?如何在 jquery 中为克隆 div 提供动态 id。如何为克隆 div 提供动态 id?
【发布时间】:2021-03-02 06:29:24
【问题描述】:

这是我的 JavaScript 代码。我尽力了,谁能帮助我。如何在 jquery 中为克隆 div 提供动态 id。如何为克隆 div 提供动态 id?这是一个由来已久的事实,即读者在查看页面布局时会被页面的可读内容分散注意力。使用 Lorem Ipsum 的关键在于它具有或多或少的字母正态分布,而不是 .

$(document).ready(function() {

   $("body").on("click",".add-more",function(){ 
       var html = $(".after-add-more").first().clone();
       
         $(html).find(".change").html("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");
       $(".after-add-more").last().after(html);
   });
   $("body").on("click",".remove",function(){ 
       $(this).parents(".after-add-more").remove();
   });
});
 <div class="col-md-12 col-xl-12 col-lg-12">
              <div class="after-add-more">
                 <div class="row">
                    <div class="col-lg-12 col-xl-12 col-md-12">
                       <div class="form-group f-g-o">
                          <label for="usr">Select Categories</label>
                          <select class="selectpicker category form-control @error('category_id') is-invalid @enderror"  name="category_id[]">
                             <option>Select Category</option>
                             @foreach($categories as $category)
                             <option value="{{$category->id}}" >{{$category->cat_name}}</option>
                             @if(count($category->childs))
                             @foreach($category->childs as $cat)
                             <option class="sub_child" value="{{$cat->id}}">-- {{$cat->cat_name}}</option>
                             @endforeach
                             @endif
                             @endforeach    
                          </select>
                          @error('category_id')
                          <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                          @enderror
                       </div>
                    </div>
                    <div class="col-lg-2 col-xl-2 col-md-12">
                       <div class="form-group f-g-o">
                          <label for="usr">Qty</label>
                          <input type="number" name="qty[]" class="form-control @error('qty') is-invalid @enderror" placeholder="Qty on combo" value="{{ old('qty') ?? 1 }}" required data-error="This field is required." />
                          <div class="help-block with-errors"></div>
                          @error('qty')
                          <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                          @enderror
                       </div>
                    </div>
                    <div class="col-lg-12 col-xl-12 col-md-12">
                       <div class="form-group f-g-o">
                          <label for="usr">Select Products</label>
                          <select class="products selectpicker form-control @error('product_id') is-invalid @enderror" multiple name="product_id[]">
                          </select>
                          @error('product_id')
                          <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                          @enderror
                       </div>
                    </div>
                    <div class="col-lg-12 col-xl-12 col-md-12">
                       <div class="form-group f-g-o change">
                          <label for="">&nbsp;</label><br/>
                          <a class="btn btn-success add-more">+ Add More</a>
                       </div>
                    </div>
                 </div>
              </div>
           </div>

【问题讨论】:

  • 把你的代码放在codesn-p中
  • 请大家帮帮我,这很重要
  • 只是单独的html代码
  • 请检查代码在sn-p中
  • 请您不要在您的问题中添加随机的东西。如果您收到一条消息说您的问题的文本与代码的比率太低,那么您应该通过添加一些关于“lorem ipsum”的随机文本来“修复”这个问题,但实际上对问题进行更详细的解释。

标签: javascript php html jquery laravel


【解决方案1】:

 $(document).ready(function() {

   $("body").on("click",".add-more",function(){ 
       var html = $(".after-add-more").first().clone();
       
         $(html).find(".change").html("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");
       $(".after-add-more").last().after(html);
   });
   $("body").on("click",".remove",function(){ 
       $(this).parents(".after-add-more").remove();
   });
   });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 col-xl-12 col-lg-12">
              <div class="after-add-more">
                 <div class="row">
                    <div class="col-lg-12 col-xl-12 col-md-12">
                       <div class="form-group f-g-o">
                          <label for="usr">Select Categories</label>
                          <select class="selectpicker category form-control"  name="category_id">
                             <option>Select Category</option>
                             <option value="11" >11</option>
                             <option value="12" >12</option>
                             <option value="13" >13</option>
                             <option class="sub_child" value="1"> 1</option>
                             <option class="sub_child" value="2"> 2</option>
                             <option class="sub_child" value="3"> 3</option>
                          </select>
                          
                          <span class="invalid-feedback" role="alert"><strong></strong></span>
                          
                       </div>
                    </div>
                    <div class="col-lg-2 col-xl-2 col-md-12">
                       <div class="form-group f-g-o">
                          <label for="usr">Qty</label>
                          <input type="number" name="qty" class="form-control" placeholder="Qty on combo" value="1" required data-error="This field is required." />
                          <div class="help-block with-errors"></div>
                          
                          <span class="invalid-feedback" role="alert"><strong></strong></span>
                          
                       </div>
                    </div>
                    <div class="col-lg-12 col-xl-12 col-md-12">
                       <div class="form-group f-g-o">
                          <label for="usr">Select Products</label>
                          <select class="products selectpicker form-control is-invalid" multiple name="product_id">
                            <option value="a" >a</option>
                            <option value="b" >a</option>
                            <option value="c" >c</option>
                            <option value="d" >d</option>
                            <option value="e" >e</option>
                            
                          </select>
                          
                          <span class="invalid-feedback" role="alert"><strong></strong></span>
                          
                       </div>
                    </div>
                    <div class="col-lg-12 col-xl-12 col-md-12">
                       <div class="form-group f-g-o change">
                          <label for="">&nbsp;</label><br/>
                          <a class="btn btn-success add-more">+ Add More</a>
                       </div>
                    </div>
                 </div>
              </div>
           </div>

【讨论】:

  • 你在寻找哪种类型的输出 @shivam
  • 让我知道这是您当前的代码,我是对的。
  • 在这种情况下,您应该使用表单提交方法不是 Id 基础从列中获取值不起作用
  • 先生,我只想知道如何为每个克隆 div 提供动态 ID 的语法
  • 你可以在循环中使用初始化 i=1 然后每次你应该检查最大值 no 并增加当前值。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-08-28
  • 1970-01-01
  • 2011-08-12
  • 1970-01-01
  • 2021-01-16
  • 2013-05-22
  • 1970-01-01
相关资源
最近更新 更多