迭代 json 对象并将每个对象(图像)附加到 HTML div 标签

2024-01-29

我的要求是:我有一个 json 对象,其中包含一些 URL(URL 是图像的 URL)及其名称。我想迭代 JSON 对象并想要获取 URL(只是图像)并想要附加将图像放入 div 中。这样我就可以看到 JSON 对象中的图像。 假设这是我的代码

var JSON = [{"name:"A","url":".../a.jpg"},{"name:"B","url":".../b.jpg"}, {"名称:"C","url":".../c.jpg"} 我想迭代这个对象,获取名称和 URL,并希望将名称和 URl 附加到 HTML 中的 div(带有一些 div ID)。详细的代码会很有帮助。 我在这里先向您的帮助表示感谢。


一个完整的例子:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var jsonData = [{"name":"A","url":".../a.jpg"},{"name":"B","url":".../b.jpg"},{"name":"C","url":".../c.jpg"}];
                var imgContainer = $("#imgContainer");
                $.each(jsonData,function(key,value){
                    console.log(imgContainer);
                    imgContainer.append('<img title="'+value.name+'" src="'+value.url+'" />');
                })
            });
        </script>
    </head>
    <body>
        <div id="imgContainer"> </div>
    </body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

迭代 json 对象并将每个对象(图像)附加到 HTML div 标签 的相关文章