Question

我想循环遍历每个System.out.println(jsonObject.getString("name")); if (jsonObject.getString("name").equals(name)) { System.out.println("equal"); }并添加一张图片，其中包含使用JavaScrip转到不同页面的链接，并将所有图片，链接和标题存储在数组对象中。我用了DOM

<li>

Answer 1

您只需要再创建两个元素：<img src="…">中的<a href="…" title="…" id="…">…</a>。您可以使用您使用的相同document.createElement方法执行此操作。元素层次结构为“ul＆gt; li＆gt; a＆gt; img”。

var list = [
    {
        id: 1,
        title: "first",
        img: "img/first.jpg",
        link: "first.html"
    },
    {
        id: 2,
        title: "second",
        img: "img/second.jpg",
        link: "second.html"
    },
    {
        id: 3,
        title: "third",
        img: "img/third.jpg",
        link: "third.html"
    }
];

var input = document.getElementById("input");

for (var i = 0; i < list.length; i++) {
    var linkInfo = list[i];

    var img = document.createElement('img');
    img.src = linkInfo.img;

    var a = document.createElement('a');
    a.href = linkInfo.link;
    a.title = linkInfo.title;
    a.id = 'link-' + linkInfo.id;
    a.appendChild(img);

    var li = document.createElement('li');
    li.appendChild(a);

    var ul = document.createElement('ul');
    ul.appendChild(li);

    input.appendChild(ul);
};

<div id="input"></div>

您的对象文字{}中也存在一些语法错误。除了最后一个key: value对之外，您需要使用逗号。

我假设您希望将ID设置为每个id的{{1}}属性，格式为<a>。如果这不是您想要的，只需移动id="link-2"行，以正确的格式更改正确元素的a.id。

Answer 2

假设HTML应如下所示：

<ul>
    <li><a href=""><img src="" alt=""></a></li>
    <li><a href=""><img src="" alt=""></a></li>
    <li><a href=""><img src="" alt=""></a></li>
    ...
</ul>

假设：

id 已分配到<li id="">
标题已分配到<img title="">
img 已分配到<img src="">
链接指向<a href="">

您必须创建<img>，<a>和<li>。并将 list 中的相应值分配给它们。

var list = [
    {
        id: 1,
        title: "first",
        img: "img/first.jpg",
        link: "first.html"
    },
    {
        id: 2,
        title: "second",
        img: "img/second.jpg",
        link: "second.html"
    },
    {
        id: 3,
        title: "third",
        img: "img/third.jpg",
        link: "third.html"
    }
];

var input = document.getElementById("input");

for (var i = 0; i <list.length; i++) {
    var ul = document.createElement('ul');
    var li = document.createElement('li');
    var a = document.createElement("a");
    var img = document.createElement("img");
    
    img.src = list[i].img;
    img.title = list[i].title;
    
    a.href = list[i].link;    
    a.appendChild(img);
    
    li.id = list[i].id;
    li.appendChild(a);
    ul.appendChild(li);
    input.appendChild(ul);
};

<div id="input"></div>

Answer 3

我注意到的一些事情，除了列表数组中缺少的逗号之外，似乎要查看的是你在循环内部为每个列表项创建一个新的ul，然后将其附加到DOM因此，对于每个列表项，您要创建一个新列表，这应该在循环之外声明，然后在循环结束后附加到#input。

＆＃13;

var list = [
    {
        id: 1,
        title: "first",
        img: "https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150",
        link: "first.html"
    },
    {
        id: 2,
        title: "second",
        img: "https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150",
        link: "second.html"
    },
    {
        id: 3,
        title: "third",
        img: "https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150",
        link: "third.html"
    }
];

var input = document.getElementById("input");
var ul = document.createElement('ul');

for (var i = 0; i < list.length; i++) {

    var li = document.createElement('li');
    var link = document.createElement('a');
    var image = document.createElement('img');
  
    li.id = list[i].id;
    li.title = list[i].title;

    link.href = list[i].link;
  
    image.src = list[i].img;
    
    link.appendChild(image);
    li.appendChild(link);
    ul.appendChild(li);
};

input.appendChild(ul);

＆＃13;

<div id="input"></div>

＆＃13;

使用JavaScript - 循环遍历每个<li>并添加带有链接的图片以获取每个li中的新页面

3 个答案: