en utilisant ++ avec jquery $ .each()

Question

J'essaye d'obtenir la valeur d'identification de la dernière image étant montrée qui est la valeur dans une case à cocher. La valeur de l'id ressemble à: "image_1, image_2 etc.

J'ai juste besoin du numéro réel, j'ai donc utilisé la fonction" tranche "pour le faire, si je télécharge 3 images par exemple, je dois alors obtenir le dernier identifiant et Donc, si la dernière image est image_5 et que je télécharge 3 nouvelles images, les nouvelles images doivent être image_6, image_7 et image_8, mais le problème est que les 3 images finissent par être image_6 .

Code d'origine:

//get the id value i.e.: image_1 
$.each(data.result.files, function (index, file) { 
var lastBox = $('input[name="pics[]"]').last().data("id"); 

// remove the image_ prefix to get the actual number value 
var lastId = parseInt(lastBox.slice(6)); 

// increment each id by 1 in the $.each() loop 
var total = lastId++; 
console.log(total); 

EDIT: code complet avec réponse incorporé:

$('#fileupload').fileupload({ 
    url: url, 
    dataType: 'json', 
    done: function (e, data) { 
     var lastBox = $('input[name="pics[]"]').last().data("id"); 
     var lastId = parseInt(lastBox.slice(6)); 
     var total = lastId; 
     $.each(data.result.files, function (index, file) { 
      total++; 
      console.log(total); 
      $("#gallery-body").prepend(` 

       <div class="col-md-3 img-box"> 
        <input type="checkbox" id="image_${total}" name="pics[]" value="${file.name}" data-id="image_${total}" /> 
        <label for="image_${total}" style="background-image: url(uploads/${file.name})"> 
         <i class="glyphicon glyphicon-ok"></i> 
        </label> 
       </div> 
        `); 

HTML SORTIE:

<div class="col-md-3 img-box"> 
    <input type="checkbox" id="image_17" name="pics[]" value="IMG_5271.jpg" data-id="image_17"> 
    <label for="image_17" style="background-image: url(uploads/IMG_5271.jpg)"> 
     <i class="glyphicon glyphicon-ok"></i> 
    </label> 
</div> 
<div class="col-md-3 img-box"> 
    <input type="checkbox" id="image_17" name="pics[]" value="dzone.jpg" data-id="image_17"> 
    <label for="image_17" style="background-image: url(uploads/dzone.jpg)"> 
     <i class="glyphicon glyphicon-ok"></i> 
    </label> 
</div> 

Answer 1

Vous devriez obtenir le dernier ID avant la boucle, puis incrémenter dans la boucle.

Et puisque vous ajoutez de nouveaux éléments au début de la liste, vous devez utiliser .first() pour obtenir l'ID le plus élevé.

var data = { 
 
    result: { 
 
    files: [{ 
 
     name: "IMG_5271.jpg" 
 
    }, { 
 
     name: "dzone.jpg" 
 
    }] 
 
    } 
 
}; 
 

 
var lastBox = $('input[name="pics[]"]').first().data("id"); 
 
var lastId = parseInt(lastBox.slice(6)); 
 
var total = lastId; 
 
$.each(data.result.files, function(index, file) { 
 
    total++; 
 
    console.log(total); 
 
    $("#gallery-body").prepend(` 
 

 
       <div class="col-md-3 img-box"> 
 
        <input type="checkbox" id="image_${total}" name="pics[]" value="${file.name}" data-id="image_${total}" /> 
 
        <label for="image_${total}" style="background-image: url(uploads/${file.name})"> 
 
         <i class="glyphicon glyphicon-ok"></i> 
 
        </label> 
 
       </div> 
 
        `); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gallery-body"> 
 
    <input type="checkbox" name="pics[]" data-id="image_4"> 
 
    <input type="checkbox" name="pics[]" data-id="image_3"> 
 
    <input type="checkbox" name="pics[]" data-id="image_2"> 
 
    <input type="checkbox" name="pics[]" data-id="image_1"> 
 
</div>

Quand je lance cela, le résultat est:

<div id="gallery-body"> 
 

 
    <div class="col-md-3 img-box"> 
 
    <input type="checkbox" id="image_6" name="pics[]" value="dzone.jpg" data-id="image_6"> 
 
    <label for="image_6" style="background-image: url(uploads/dzone.jpg)"> 
 
         <i class="glyphicon glyphicon-ok"></i> 
 
        </label> 
 
    </div> 
 

 

 
    <div class="col-md-3 img-box"> 
 
    <input type="checkbox" id="image_5" name="pics[]" value="IMG_5271.jpg" data-id="image_5"> 
 
    <label for="image_5" style="background-image: url(uploads/IMG_5271.jpg)"> 
 
         <i class="glyphicon glyphicon-ok"></i> 
 
        </label> 
 
    </div> 
 

 
    <input type="checkbox" name="pics[]" data-id="image_4"> 
 
    <input type="checkbox" name="pics[]" data-id="image_3"> 
 
    <input type="checkbox" name="pics[]" data-id="image_2"> 
 
    <input type="checkbox" name="pics[]" data-id="image_1"> 
 
</div>