Question

我在JavaScript函数中有HTML代码。我希望div“ .one-card”在每个div“ .row”中重复4次。知道div“ .row”也会在foreach中重复出现。我想告诉它（使用模），因为模（4）的结果不同于零，请显示此代码。

我对此进行了测试，但无法正常工作。你能帮我吗？非常感谢！

更精确：数据来自json文件

$.getJSON('js/issuers.json', function(donnees) {
  let jsonData = "";

    $.each( donnees, function( key, val ) {


    jsonData +=
    "<div class='row'>"
      while (donnees % 4 != 0) {
    "<div class=\"one-card col-lg-3 col-md-6 wow fadeInUp\">"+
        "<div class=\"card\">"+
    "<div class=\"card-container-img\">"+
      "<img src=\""+val.logo+"\"+ class=\"card-img-top\" alt=\""+val.name+"\">"+
    "</div>"+ [...]

}

"</div>"
});
   $(".testjson").html(jsonData); 
});

Answer 1

我从您的问题中猜测，您想要的是每行四张卡片。抱歉，如果我没有做到这一点。

这就是我要做的：

将donnees分成4块
将每个拆分块映射到其相应的html
将html附加到页面上

// this is just faking the getJson call
const $ = {
  getJSON: (_, cb) => cb(Array.from(new Array(55).keys())),
}

// we specify how big we want the chunks here so we can use it later
const chunkSize = 4;

// this is a utility function to get an array of a given size filled with numbers
const getArrayOfSize = size => Array.from(new Array(size).keys())

// this function takes an array and a size of chunk, and returns another function;
// the function it returns takes an index, and returns a chunk of the array of the size
// specfied at the index specified
const getChunkSlicer = (array, size) =>
  i =>
    array.slice(i * size, (i * size) + size)

// this function gives us back a function which can be used to split an array into chunks of the size specified
const groupToSize = size =>
  array =>
    getArrayOfSize(Math.ceil(array.length / size))
      .map(getChunkSlicer(array, chunkSize))

// splitIntoFours is a function which splits an array into chunks of 4 items
const splitToFours = groupToSize(4);

// this is where we convert an item to its html
const getCardHtml = item => `
  <div class="one-card col-lg-3 col-md-6 wow fadeInUp">${item}</div>
`;

// this is where we convert a row into its html
const getRowHtml = rowData => `
  <div class='row'>
    ${rowData.map(getCardHtml).join('')}
  </div>
`;

// now we can put everything together
$.getJSON('js/issuers.json', donnees => {

  // rows is donnees, split into chunks of 4
  const rows = splitToFours(donnees);
  
  // rowsHtml is the html to represent those chunks as rows
  const rowsHtml = rows
    .map(getRowHtml)
    .join('')
  
  // add the final html to the page
  document.getElementById('x').innerHTML = rowsHtml;
})

/* the css is only here to demonstrate the principle */
.row {
  background-color: rgba(20, 20, 30, 0.5);
  margin-bottom: 50px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="x"></div>

Answer 2

我假设donnees的索引为0，这意味着从0 % 4 === 0;开始，您的循环将永远不会开始。尝试while ((donnees + 1) % 4 != 0)。

编辑：

要想从x％y中获取任何结果，x和y都必须是数字，所以您要做的可能是使用每个被循环的元素的索引，因此类似while((key+1) % 4 !== 0)应该可以解决问题。

Answer 3

我想回应其中一条评论。遵循您的尝试相当困难，但是我根据您发布的JSON进行了尝试。

var donnees = { "1": { "validatorID": "1", "address": "0x8b...", "KYBHash": "104c99...", "ID": "1", "country": "fr", }, "2": { "validatorID": "2", "address": "0x8b2...", "KYBHash": "104c992...", "ID": "2", "country": "fr", }}

let jsonData = "";

$.each( donnees, function( key, val ) {
  // key is 1 or 2, val is json like: { "validatorID": "1", "address": "0x8b...", "KYBHash": "104c99...", "ID": "1", "country": "fr", }
  jsonData += "<div class=\"row\">"
  $.each( val, function( newKey, data ) {
  // newKey is name, like address, data is like "0x8b..."

    if (newKey !== 'ID') jsonData += "<div class=\"one-card col-lg-3 col-md-6 wow fadeInUp\"><p>" +data + "</p></div>"
  })
  jsonData += "</div>"
})
console.log(jsonData)
$(".testjson").html(jsonData);

Answer 4

我的导师找到了解决方案，因此我与您分享。感谢所有花时间回答的人。

$.getJSON('js/issuers.json', function(donnees) {
  let jsonData = "";
  let count = 1;

  // for (i = 1; i <= donnees.length; i++) {
    $.each( donnees, function( key, val ) {
      if (count === 1) {
        jsonData += "<div class='row'>"
      }

    jsonData +=
    "<div class=\"one-card col-lg-3 col-md-6 wow fadeInUp\">"+

[ETC...]

"</div>" 

if (count === 4) {
  jsonData += "</div>"
}

count = (count%4) + 1;



});
   $(".testjson").html(jsonData); 
});

用模循环？

4 个答案: