Question

我遇到克隆div的问题。

我有id=director-uploads1的div。我想在class=director-uploads-hidden附加一个div。我想将新克隆的div设置为类director-uploads-hidden数据编号为＃director-uploads1 data-number + 1.

＆＃13;

$(document).ready(function() {
  function clone(){
     var number = $('#director-uploads1').attr('data-number');
     var director = $('.director-uploads-hidden').html();

                var clone = $('#director-uploads1').append(director)
                .find("*")
                .each(function() {
                   var name = $(this).attr('name');
                })
                .on('click', 'button.clone', clone);
    //I want to get $("#director-uploads1") attr data-number and to set data-number to the newly cloned div to be current value + 1
    //First I did it in this way $("#director-uploads1").attr('data-number', parseInt(number)+1);  but I don't want to change initial value of div, only value of the cloned div

    
    }
   $("button#add-director").on("click", clone);
  
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div class="director-uploads number" id="director-uploads1" data-number="0" data-changed="0">
   //some data
   </div>
 <div class="director-uploads-hidden number" style="display:none;" data-number="1" data-changed="0">
   //cloned data
   </div>
 <button type="button" class="btn btn-success" id="add-director">Add Additional Director</button>

＆＃13;

那么，之后我通过ajax将数据传递给控制器，我可以让每个单独div的data-number不同，这样我就可以区别了。

我怎么能这样做？感谢。

更新：

＆＃13;

  $(document).ready(function() {
    function clone(){
    var number = $('.director-uploads-hidden').attr('data-number');
       
        var director = $('.director-uploads-hidden').clone(true);
        director.data("number", parseInt(number)+1);
        $('#director-uploads1').append(director);
        director.css("display", "block");
      

    }

    $("button#add-director").on("click", clone);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div class="director-uploads number" id="director-uploads1" data-number="0" data-changed="0">
   //some data
   </div>
 <div class="director-uploads-hidden number" style="display:none;" data-number="1" data-changed="0">
   //cloned data
   </div>
 <button type="button" class="btn btn-success" id="add-director">Add Additional Director</button>

＆＃13;

谢谢大家的帮助，也许这不是最好的解决方案，但我尝试了这个并且它正在工作：

＆＃13;

$(document).ready(function() {
  function clone(){
   var number = $('#director-uploads1').attr('data-number');
        $("#director-uploads1").attr('data-number', parseInt(number)+1);
        $('.director-uploads-hidden').find('.app-file').attr('data-item', parseInt(number)+1);
        var director = $('.director-uploads-hidden').html();

        $('#director-uploads1').append(director)
            .find("*")
            .each(function() {
                var name = $(this).attr('name');
            })
            .on('click', 'button.clone', clone);
  
   }

    $("button#add-director").on("click", clone);
  
  $("html").on('change', '.app-file', function(){
       var number = $(this).attr('data-item');
        console.log(number);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <div class="director-uploads number" id="director-uploads1" data-number="0" data-changed="0">
 
    <input type="file" class="app-file director_documents" data-item="0" name="director_front_passport[]"/>
    </div>
 <div class="director-uploads-hidden number" style="display:none;" data-number="1" data-changed="0">
    <input type="file" class="app-file director_documents" data-item="0" name="director_front_passport[]"/>
   </div>
<button type="button" class="btn btn-success" id="add-director">Add Additional Director</button>

＆＃13;

Answer 1

您的clone变量不会包含#director-uploads1的克隆，它将成为find('*')创建的集合。

$('.director-uploads-hidden').html()只会获取内部html，而不是包含数据属性的外部div标记。

要制作克隆，您只需使用clone() jQuery方法

var $clone = $('.director-uploads-hidden').clone();

之后要更改数据属性，您只需从$clone而不是$("#director-uploads1")

进行设置

$clone.data('number', parseInt(number,10)+1);
//or
$clone.attr('data-number', parseInt(number,10)+1);

另外

.on('click', 'button.clone', clone);

尝试将click处理程序设置为您的元素而不是您的函数，因为局部变量clone的名称与您的函数相同。重命名您的克隆变量，例如上面示例中的$clone。

Answer 2

jQuery的for(Agent ag : yourListOfAgents){ if(random() < 0.5){ connections.connectTo(ag); } }方法可以帮助您：

clone()

有关此方法怪癖的详细信息，请参阅https://api.jquery.com/clone/。根据您的具体情况和要求，您可能需要进行一些调整。

Answer 3

尝试使用此代码段。

您可以根据需要更改属性和追加位置。

//Get old number from the first div
var newNumber = parseInt($('#director-uploads1').attr('data-number'));
$('#add-director').click(function(){
//Get the new length that you would like to set for id
  var newLength = parseInt($('.number').length)+1;
//Increment the old number value with +1 to set the new number for every div.
  newNumber += 1;
  $('div#director-uploads1')
    .clone()
    .attr('id', 'director-uploads'+newLength)
    .attr('data-number', newNumber)
    .removeClass()
    .addClass('director-uploads-hidden number')
    .html('clone data: number'+newNumber +':  id '+' director-uploads'+newLength)
    .insertBefore('#add-director');
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div class="director-uploads number" id="director-uploads1" data-number="0" data-changed="0">
   //some data
   </div>
 <button type="button" class="btn btn-success" id="add-director">Add Additional Director</button>

克隆div时如何更改data-attr

3 个答案: