Question

我试图在ul中附加一些li元素。在这种情况下，我循环遍历名为blogData的数组并访问每个标记方法。我遇到的问题 - 我似乎无法循环遍历标签内的每个数组，并将数据附加到每篇文章中的ul中，将每个对象的所有标签数据附加到每个ul。

＆＃13;

const blogData = [
    {
        title : "blog first",
        date : "01",
        tags : ["first", "second"],
        body : "Some text",
        id : 1
    },
    {
        title : "blog second",
        date : "02",
        tags :  ["third", "fourth"],
        body : "Some more text",
        id : 2
    }
];

function tagUl (object) {
    setTimeout(() => {
        const ul = $('.tags-ul');
        for (let i = 0; i < ul.length; i++) {
            const $li = $('<li>');
            $li.text(object[i].tags);
            ul.append($li);            }
    }, 10);
}
tagUl(blogData);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
  <ul class="tags-ul">
  </ul>
</article>

<article>
  <ul class="tags-ul">
  </ul>
</article>

＆＃13;

正如您在此处看到的那样，通过运行代码，所有ul标签都会附加相同的符号。正如标题所说它返回[object Object]。几分钟前，当我第一次写这篇文章时就是这种情况。现在的情况是它只是返回错误的数据

Answer 1

您的问题是，ul变量代表所有 <ul class="tags-ul">元素，因此执行＆＃34;追加＆＃34;在该变量上将相同的内容附加到它所代表的所有元素上。

您可以通过循环或更粗略地（因为您已经有一个for循环来遍历您的blogData对象），通过索引从jQuery对象获取raw元素，然后专门追加来分别访问每个元素那个。它还通过循环标记数组本身为每个标记创建单独的<li>。

＆＃13;

const blogData = [{
    title: "blog first",
    date: "01",
    tags: ["first", "second"],
    body: "Some text",
    id: 1
  },
  {
    title: "blog second",
    date: "02",
    tags: ["third", "fourth"],
    body: "Some more text",
    id: 2
  }
];

function tagUl(object) {
  const ul = $('.tags-ul');
  for (let i = 0; i < ul.length; i++) {
    const $li = $('<li>');
    for (var j = 0; j < object[i].tags.length; j++) {
      $(ul[i]).append($("<li/>", { text: object[i].tags[j] }));
    }
  }
}

$(function() {
  tagUl(blogData);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
  <ul class="tags-ul">
  </ul>
</article>

<article>
  <ul class="tags-ul">
  </ul>
</article>

＆＃13;

P.S。我假设你的setTimeout是一个kludge，允许在运行代码之前加载HTML内容，所以我用一个更可靠的jQuery包装器替换它，等待文档准备就绪，然后在其中执行任何代码（$(function() { ... });是一个稍微易于理解的陈述$(document).ready(function() ... });）

的简写

Answer 2

您需要在blogData中的每个对象内迭代标记数组，然后为数组中的每个值添加li。这样的事情会起作用：

＆＃13;

const blogData = [
    {
        title : "blog first",
        date : "01",
        tags : ["first", "second"],
        body : "Some text",
        id : 1
    },
    {
        title : "blog second",
        date : "02",
        tags :  ["third", "fourth"],
        body : "Some more text",
        id : 2
    }
];

function tagUl (object) {
    setTimeout(() => {
        const ul = $('.tags-ul');
        for (let i = 0; i < ul.length; i++) {
            var tags = object[i].tags;
            for (var j=0; j<tags.length; j++){
               $(ul[i]).append("<li>" + tags[j] + "</li>");            
            }
        }
    }, 10);
}
tagUl(blogData);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
  <ul class="tags-ul">
  </ul>
</article>

<article>
  <ul class="tags-ul">
  </ul>
</article>

＆＃13;

向dom追加元素会从数组

2 个答案: