javascript - foreach 图像数组中的元素

Question

var str = '01.jpg,02.jpg,03.jpg';
var arr = [str.split(',')];
var cnt = '';
arr.forEach(function(el){
		cnt += "<img class = 'imgall' src = 'imgt/" + el + "' alt='img'>";
	});
	console.log(cnt);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我在控制台中需要的是:

<img class='imgall' src='imgt/01.jpg' alt='img'>
<img class='imgall' src='imgt/02.jpg' alt='img'>
<img class='imgall' src='imgt/03.jpg' alt='img'>  

有什么帮助吗？

Answer 1

您不需要将拆分结果包装在另一个数组中(因为拆分结果是一个数组)，您可以映射这些项目并稍后将它们连接到单个字符串。

var str = '01.jpg,02.jpg,03.jpg';
    arr = str.split(',');
    cnt = arr
        .map(function (el) {
            return '<img class="imgall" src="imgt/' + el + '" alt="img">';
        })
        .join('\n'); // take later '', without newline

console.log(cnt);

ES6 带有 template literal

var str = '01.jpg,02.jpg,03.jpg';
    result = str
        .split(',')
        .map(s => `<img class="imgall" src="imgt/${s}" alt="img">`)
        .join('\n'); // take later '', without newline

console.log(result);