Javascript 我能'；t使用jquery输出所需的html结构

我的项目中有一个通过JSON文件的循环。我从中检索图像的href和src。但我需要以一种特定的方式输出它，如下所示：

<li>
    <a href="link1_fromJSON.HTML" data-transition="slidedown">
        <img src="image_1_fromJSON.jpg"/>
        <h3> Menu1</h3>
    </a></li>
<li>
    <a href="link2_fromJSON.HTML" data-transition="slidedown">
       <img src="image_2_fromJSON.jpg"/>
       <h3> Menu2</h3>
   </a>
</li>
<li>
    <a href="link_3_fromJSON.HTML" data-transition="slidedown">
        <img src="image_3_fromJSON.jpg"/>
        <h3> Menu3</h3>
    </a>
<li>

以下是我的javascript代码：

$.each(data.posts, function(index, d){
$("<li>", { html:'<img src="' + d.thumbnail_images.thumbnail.url + '" />' }).appendTo("#div1"); 
});

$。每个（data.posts，函数（index，d）{
$（“
”，{html:'}）；
});

我得到的只是一个div中的图像列表。我不知道如何获得我想要的结果。

试试这个

$("ul").append("<li><a href='url-here'><img src="' + d.thumbnail_images.thumbnail.url + '" /></a></li>");

$（“ul”）。追加（
）；

最好将其发布到DOM中一次

var myNewStuff = "";
$.each(data.posts, function(index, d){
    myNewStuff = myNewStuff + "<li><img src='" + d.thumbnail_images.thumbnail.url + "' /></li>";
});
$(myNewStuff).appendTo("#div1");

var myNewStuff=”“；
$.each（data.posts，函数（index，d）{
myNewStuff=myNewStuff+“
”；
});
$（myNewStuff）。附于（“#div1”）；

编辑：尝试在没有任何定义的情况下放入href，因此我猜：

$.each(data.posts, function(index, d){
    myNewStuff = myNewStuff + "<li><a data-transition='slidedown' href='" + d.myhref + "<img src='" + d.thumbnail_images.thumbnail.url + "' /><h3> Menu" + index + "</a></li>";
});
$(myNewStuff).appendTo("#div1");

$。每个（data.posts，函数（index，d）{
myNewStuff=myNewStuff+“
”；
});
$（myNewStuff）。附于（“#div1”）；

回答

var myNewStuff = "";
$.each(data.posts, function(index, d){
    myNewStuff = myNewStuff + "<li><a data-transition='slidedown' href='" + d.slug + "'><img src='" + d.thumbnail_images.thumbnail.url + "' /><h3> Menu" + index + "</li>";
        });
$(myNewStuff).appendTo("#div1");

var myNewStuff=”“；
$.each（data.posts，函数（index，d）{
myNewStuff=myNewStuff+“
菜单”+index+“
”；
});
$（myNewStuff）。附于（“#div1”）；

这个怎么样：

HTML

Javascript

$(document).ready(function(){
    var data = [
        {href: '/url1', img: 'img1.jpg', text: 'text1'},
        {href: '/url2', img: 'img2.jpg', text: 'text2'},
        {href: '/url3', img: 'img3.jpg', text: 'text3'},
        {href: '/url4', img: 'img4.jpg', text: 'text4'}
    ];

    for(var i = 0; i < data.length; i++){
        var li = $('<li>');
        var h3 = $('<h3>').text(data[i].text);
        var im = $('<img/>').attr('src', data[i].img);
        var a  = $('<a>').attr('href', data[i].href).append(im).append(h3);

        $('#list').append(li.append(a));
    }
})

$（文档）.ready（函数（）{
风险值数据=[
{href:'/url1'，img:'img1.jpg'，text:'text1'}，
{href:'/url2'，img:'img2.jpg'，text:'text2'}，
{href:'/url3'，img:'img3.jpg'，text:'text3'}，
{href:'/url4'，img:'img4.jpg'，text:'text4'}
];
对于（变量i=0；i”）；
var h3=$（''）.text（数据[i].text）；
var im=$（''）.attr（'href'，data[i].href）.append（im）.append（h3）；
$（'#list'）.append（li.append（a））；
}
})

我在您的行中遇到此错误：SyntaxError:意外标记；如果你给了ul一个id或class，那么请提及它。示例：$（“ul#id”）或$（“ul.class”）字符串中的引号完全乱了，它会抛出语法错误。即使在修复了字符串之后，您也只是创建了一个列表，然后丢弃了它。我只是在您的代码中更改了两个小东西，它成功了！非常感谢你@艾德：也许你能告诉我们那“两个小东西”是什么？

$(document).ready(function(){
    var data = [
        {href: '/url1', img: 'img1.jpg', text: 'text1'},
        {href: '/url2', img: 'img2.jpg', text: 'text2'},
        {href: '/url3', img: 'img3.jpg', text: 'text3'},
        {href: '/url4', img: 'img4.jpg', text: 'text4'}
    ];

    for(var i = 0; i < data.length; i++){
        var li = $('<li>');
        var h3 = $('<h3>').text(data[i].text);
        var im = $('<img/>').attr('src', data[i].img);
        var a  = $('<a>').attr('href', data[i].href).append(im).append(h3);

        $('#list').append(li.append(a));
    }
})