with ++ with jquery $ .each()

Question

체크 표시의 값인 마지막 이미지의 id 값을 가져 오려고합니다. id 값은 다음과 같습니다 : "image_1, image_2 etc.

슬라이스 함수를 사용하기 위해 실제 숫자가 필요합니다. 예를 들어 3 개의 이미지를 업로드하면 마지막 ID를 가져와야합니다. 새 이미지가 추가 될 때마다 1 씩 증가합니다. 마지막 이미지가 image_5이고 3 개의 새 이미지를 업로드하면 새 이미지는 image_6, image_7 및 image_8이되어야합니다. 그러나 문제는 3 개의 이미지가 모두 image_6이된다는 것입니다. .

원래 코드 :

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

편집 : 통합 대답에 전체 코드 :

01 23,516,

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

<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

그런 다음, 전에 루프를 마지막 ID 를 얻을 루프 내에서 증가한다.

목록 앞쪽에 새 항목을 추가하고 있으므로 번호가 가장 큰 ID를 얻으려면 .first()을 사용해야합니다. 나는이 프로그램을 실행할 때

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>

, 결과는 다음과 같습니다

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