Question

此练习遇到的问题是，我需要在html上输出列表<li></li>，并用我尝试过几次但无法获取的对象中的项目填充它。正如您将在我的html文件中看到的那样，我已经具有{grain“类的<ul></ul>标记。按照说明，我尝试创建一个循环以遍历对象并将每个值附加到<li>，以便它们可以显示在我的html中。

最终输出应为：

这是我的index.html：

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Grain globber</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="css/main.css" rel="stylesheet">
</head>
<body>

  <h1>Grains</h1>
  <ul class="grains"></ul>

  <script src="jquery.min.js"></script>
  <script src="js/grains.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

这是保存我的对象的我的grains.js：

var grains = [
  {
    name: 'Peanuts',
    img: 'peanuts.jpg',
    desc: 'First cultivated in the valleys of Paraguay.'
  },
  {
    name: 'Beans',
    img: 'beans.jpg',
    desc: 'A summer crop that needs warm temperatures.'
  },
  {
    name: 'Lentils',
    img: 'lentils.jpg',
    desc: 'An edible pulse from a bushy annual plant.'
  }
];

这是我的main.js文件，我试图在其中完成任务但被卡在：

$('.grains').each(function(){
    document.write($(this).text(grains) + "\n")
});

$("ul").each(function(grains) {
    for(var i = 0; i < grains.length;i++){
        grains[i].name;
        grains[i].img;
        grains[i].desc;
        if (('body').hasClass('grains')) {
        $('ul').append('<li>'+grains[i].name+'</li>'+'<li>'+grains[i].img+'</li>'+'<li>'+grains[i].desc+'</li>');
    }


    }

});

这是我的输出：

我知道我可以通过这种方式完成它（见下文），但是我需要使用一个循环：

var $list = $('.grains');
$list.append('<h2>' + grains[0].name + '</h2>');
$list.append('<img src="images/peanuts.jpg">');
$list.append('<p>' + grains[0].desc + '</p>');

$list.append('<h2>' + grains[1].name + '</h2>');
$list.append('<img src="images/beans.jpg">');
$list.append('<p>' + grains[1].desc + '</p>');

$list.append('<h2>' + grains[2].name + '</h2>');
$list.append('<img src="images/lentils.jpg">');
$list.append('<p>' + grains[2].desc + '</p>');

以下是说明：

使用已经制成的一组谷物，使用jQuery和CSS在HTML中创建一个布局。


分叉此存储库。

该信息位于grains.js文件中的对象数组内部。

遍历grains变量，并使用jQuery将<li>标签输出到HTML文件中已经存在的<ul>中。

每个<li>标签应包含一个<img>，一个<h2>和一个<p>

使用CSS设置JavaScript生成的列表的样式-选择器已准备就绪。

请勿更改HTML。

请勿更改grains.js

通过Markbot运行它，并确保它通过所有检查。



目标

在视觉上匹配“屏幕快照”文件夹中的图像。

我只需要一些有关使循环正常工作的指导。

Answer 1

我能够使用它并使用以下方法解决它：

var $list = $('.grains');
function loopIt(){
   for(var i=0; i<grains.length; i++){
      $list.append('<li><h2>' + grains[i].name + '</h2></li>');
      $list.append('<li><img src=' + grains[i].img +'></li>');
      $list.append('<li><p>' + grains[i].desc + '</p></li>');
   }
}
loopIt();

Answer 2

您得到[object Object]，因为谷物是一个对象数组。

我建议您构建html，然后仅将其附加一次，而不是在循环中更改DOM。

let html = '';

$.each(grains, (index, grain)=> {
    html += `<li><img src="${grain.img}"><h2>${grain.name}</h2><p>${grain.desc}</p></li>`
});

$('.grains').html(html);

https://jsfiddle.net/09uvxh2s/8/

Answer 3

您要在此处查看的真正挑战是遍历数组。一旦完成该工作，就可以一遍又一遍地将数据添加到当前索引中。第一个解决方案是简单的for循环。

for (let i = 0; i < grains.length; i++) { ... }

另一个选择是研究新的ES6遍历数组的方式。我建议阅读ForEach。

grains.forEach(grain => { ... })

在这些循环中，只需在代码段中编写要重复的代码即可。

Answer 4

您处在正确的轨道上，但是了解在循环.each（）时要迭代的内容很重要。

编写$（'。grains'）。each时，您要循环遍历每个HTML类元素类“ grains”。这不是您想要的。混乱的部分原因是您的班级称为谷类，而您的变量称为谷类。我认为这是一个错误的选择（我不知道您的错）。

您想要做的是遍历名为grains的变量。参见下面的示例。

var grains = [
  {
    name: 'Peanuts',
    img: 'https://nuts.com/images/auto/801x534/assets/dd79402e574cd109.jpg',
    desc: 'First cultivated in the valleys of Paraguay.'
  },
  {
    name: 'Beans',
    img: 'https://www.rd.com/wp-content/uploads/2014/02/03-beans-lower-cholesterol-sl.jpg',
    desc: 'A summer crop that needs warm temperatures.'
  },
  {
    name: 'Lentils',
    img: 'https://5.imimg.com/data5/KV/EJ/MY-27379132/organic-masoor-dal-500x500.jpeg',
    desc: 'An edible pulse from a bushy annual plant.'
  }
];

grains.forEach(function(grainType) {
  $('.grains').append('<li><img src="' + grainType.img + '"><div><h2>' + grainType.name + '</h2><p>' + grainType.desc + '</p></div></li>');
});

ul {
 list-style-type: none;
}

ul li {
  margin-top: 20px;
}

ul div {
  display: inline-block;
  max-width: 170px;
}

ul img {
  max-width: 70px;
  vertical-align: top;
}

ul div {
 margin-left: 5px;
}

ul div h2 {
  margin: 0px;
  font-weight: bold;
  font-size: 14px;
}

ul div p {
  margin: 0px;
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Grain globber</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="css/main.css" rel="stylesheet">
</head>
<body>

  <h1>Grains</h1>
  <ul class="grains"></ul>

  <script src="jquery.min.js"></script>
  <script src="js/grains.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

PS-我无权访问您的图片，因此我只是从网络上获取了一些图片。

使用对象在HTML中创建列表

目标

4 个答案: