mistery_girl mistery_girl - 3 months ago 18
jQuery Question

How to change data-attr when clone div

I have issue with cloning a div.

I have a div with

id=director-uploads1
. I want to append a div with
class=director-uploads-hidden
to it. I want to set newly cloned div with class
director-uploads-hidden
data-number to be with value #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>





So, that after that I pass data to controller via ajax, I can get
data-number
of each separate div to be different, so that I can differ them.

How could I do that? Thanks.

Updated:



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





Thank you all for help, maybe it's not the best solution, but I tried with this and it's working:



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

Try with this snippet.

You can change the attributes and append position as per your need.

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

Comments