mit ++ mit jquery $ .each()

Question

Ich versuche, den ID-Wert des letzten Bildes angezeigt wird, die den Wert in einem Kontrollkästchen ist. Der ID-Wert sieht folgendermaßen aus: "image_1, image_2 usw.

Ich brauche nur die tatsächliche Nummer, also habe ich die Slice-Funktion dazu verwendet. Wenn ich zum Beispiel 3 Bilder hochlade, muss ich dann die letzte ID bekommen und Wenn das letzte Bild image_5 ist und ich 3 neue Bilder hochlade, sollten die neuen Bilder image_6, image_7 und image_8 sein, aber das Problem, das ich habe, ist, dass alle 3 Bilder image_6 sind .

Originalcode:

//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: Voll Code mit Antwort aufgenommen:

$('#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-Ausgabe:

<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

Sie sollten die letzte ID vor die Schleife bekommen, dann in der Schleife erhöhen.

Und da Sie neue Elemente am Anfang der Liste hinzufügen, sollten Sie .first() verwenden, um die ID mit der höchsten Nummer zu erhalten.

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>

Als ich das laufen, ist das Ergebnis:

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