遍历JSON数据渲染页面时，如何优化重复设置图片src的冗余jQuery代码？

优化方案 #

可以直接遍历.account-image元素集合，利用元素索引匹配JSON数据的下标，替代硬编码操作，完整实现代码如下：

$(function(){
    $.getJSON('data.json', function(data){
        let content = '';
        for(let x in data){
            content += data[x]
        }
        // 动态遍历所有图片元素
        $('.account-image').each(function (index) {
            // 索引越界防护，避免报错
            if (data[index]) {
                $(this).attr('src', data[index].logo)
            }
        })
    })
})

逻辑说明 #

• jQuery的.each()方法会遍历所有匹配到的.account-imageDOM元素，回调参数index对应元素的顺序下标，和原代码中eq()的参数完全匹配
• 新增data[index]存在性判断，避免JSON数据长度小于图片元素数量时，出现读取undefined属性的报错

如果更习惯用原生for循环实现，也可以使用以下写法，同时自动适配数据和元素的最小长度，更安全：

$(function(){
    $.getJSON('data.json', function(data){
        let content = '';
        for(let x in data){
            content += data[x]
        }
        const $imgList = $('.account-image')
        // 取数据长度和元素长度的最小值作为遍历上限
        const maxLen = Math.min(data.length, $imgList.length)
        for (let i = 0; i < maxLen; i++) {
            $imgList.eq(i).attr('src', data[i].logo)
        }
    })
})

内容的提问来源于stack exchange，提问作者Daryl