如何在克隆 div 时更改数据属性

Question

我无法克隆 div。

我有一个 div 和 id=director-uploads1。我想附加一个 div 和 class=director-uploads-hidden 到它。我想将新克隆的 div 设置为 class director-uploads-hidden data-number 的值为 #director-uploads1 data-number + 1.

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

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

所以，在我通过 ajax 将数据传递给控制器之后，我可以让每个单独的 div 的 data-number 不同，这样我就可以区分它们。

我该怎么做？谢谢。

已更新：

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

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

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

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

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

Answer 1

jQuery的clone()方法应该可以帮助你：

$(document).ready(function() {
  var number = parseInt($('#director-uploads1').data('number'));

  function clone(){
    var director = $('.director-uploads-hidden').clone(true); //true will cause it to clone all associated data and events as well
    director.data("number", number+1);
    director.removeClass("director-uploads-hidden");
    director.css("display", "block"); 
    //if you want to add any other extra data or events, do it here before appending the object
    $('#director-uploads1').append(director);
    number++;
  }

  $("button#add-director").on("click", clone);
});

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

Answer 2

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

正在尝试将点击处理程序设置为您的元素而不是您的函数，因为局部变量 clone 的名称与您的函数相同。重命名您的克隆变量，例如上面示例中的 $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 时更改数据属性

How to change data-attr when clone div

javascript

jquery

clone