цикл через массив, выводят каждый элемент в новую строку

Question

Я пытаюсь перебрать массив и записать каждый элемент в новую строку одним нажатием кнопки. В настоящее время, когда я нажимаю кнопку, ничего не происходит.

Ошибок в коде не видно, где я ошибся?

$(document).ready(function() { 
 

 
    var vehicle = ["G122 IVL", "H151 KEE", "U109 FIJ"]; 
 

 
    var cameraOne = function() { 
 

 
    $.each(vehicle, function(index, value) { 
 
     $('#c1').html('<p>' + value + '</p>'); 
 
    }); 
 
    }; 
 

 
    $('#cameraOne').click(function() { 
 
    cameraOne(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div> 
 
    <input type="button" id="cameraOne" value="Camera One" /> 
 
    <div id="c1"></div> 
 
</div>

Answer 1

Вы перезаписать содержимое #c1 с каждой новой строки, если вы хотите добавить:

$(document).ready(function() { 
 

 
    var vehicle = ["G122 IVL", "H151 KEE", "U109 FIJ"]; 
 

 
    var cameraOne = function() { 
 
    $('#c1').empty(); 
 

 
    $.each(vehicle, function(index, value) { 
 
     // use .text() instead of just writing the value to the <p> tag, so we're safe 
 
     // if the value contains <, etc. 
 
     $('#c1').append($('<p>').text(value)); 
 
    }); 
 
    }; 
 

 
    $('#cameraOne').click(function() { 
 
    cameraOne(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div> 
 
    <input type="button" id="cameraOne" value="Camera One" /> 
 
    <div id="c1"></div> 
 
</div>

Answer 2

Вместо того, чтобы использовать «HTML '$('#c1').html('<p>' + value + '</p>');, который вызывает перезапись строки каждой время, когда значение найдено, вы должны использовать 'append' $('#c1').append('<p>' + value + '</p>');, чтобы создать новую строку для каждого значения.

Answer 3

Попробуйте это:

$(document).ready(function() { 

var vehicle = ["G122 IVL", "H151 KEE", "U109 FIJ"]; 

var cameraOne = function() { 

    $.each(vehicle, function(index, value) { 
     $('#c1').append('<p>' + value + '</p>'); 
    }); 
}; 

$('#cameraOne').click(function() { 
     cameraOne(); 
    }); 
}); 

html перезаписывает содержимое, так что вы получите только последнее значение. Вместо этого используйте append.