Question

我有一个json数据，我想在dl标签中显示它，我想在每次循环json数据时创建新的dl标签，但我得到的输出是dl将在dt之前创建和关闭并且dd被认为是在它的内部被创建，你可以在下面的小提琴jsfiddle.net/buo28k1L/56/中看到。下面是我的代码我向dl添加样式以显示dl的形成位置，你可以看到dt和dd在dl之外而不是在其中。

HTML

<div id="content"></div>

CSS

dl {
  border:1px solid red;
  height: 100px;
  width: 300px;
}

JS

  var data = [
  [{
    "id": "67",
    "name": "Baby & Toddler Clothing "
  }, {
    "id": "68",
    "name": "Kids' Clothing, Shoes & Accessories"
  }, {
    "id": "69",
    "name": "Costumes, Reenactment Theater"
  }],
  [
    [{
      "id": "572",
      "name": "Baby Clothing Accessories "
    }, {
      "id": "573",
      "name": "Baby Shoes"
    }],
    [{
      "id": "579",
      "name": "Boys Clothing [Sizes 4 & Up] "
    }, {
      "id": "580",
      "name": "Boys Shoes"
    }],
    [{
      "id": "588",
      "name": "Costumes"
    }, {
      "id": "589",
      "name": "Reenactment & Theater "
    }]
  ]
]

if (data.length > 0) {
  var content = $("#content");
  firstdata = data[0];
  secdata = data[1];

  for (var i = 0; i < firstdata.length; i++) {
   // var d =  $( document.createElement('dl') );
    var dl = $("#content").append("<dl/>");
    dl.append("<dt href='" + firstdata[i].id + "'>" + firstdata[i].name + "</dd>");

    for (var j = 0; j < secdata.length; j++) {
      if (secdata[i][j] !== undefined) {
        dl.append("<dd href='" + secdata[i][j].id + "'>" + secdata[i][j].name + "</dd>");
      }
    }
  }
  content.append(dl);
} else {
  console.log('no item for this categories');
}

Answer 1

你的第一个for循环中有一个错误。试试这个。

for (var i = 0; i < firstdata.length; i++) {
   // var d =  $( document.createElement('dl') );
   //create an empty dl tag
    var dl = $("<dl></dl>");
    //append your dt
    dl.append("<dt href='" + firstdata[i].id + "'>" + firstdata[i].name + "</dt>");
    //append your all dd
    for (var j = 0; j < secdata.length; j++) {
        if (secdata[i][j] !== undefined) {
           dl.append("<dd href='" + secdata[i][j].id + "'>" +secdata[i][j].name + "</dd>");
      }
    }
  //append each dl before starting new one.
  content.append(dl);
}

Answer 2

您错误地使用了append()。您可以做的是首先创建一个包含dt和dd的HTML字符串，然后将其添加到dl，然后将此dl附加到{{1}的div作为id。要进一步验证以下代码段，您可以使用浏览器content，您将看到HTML呈现为

inspect element

＆＃13;

<dl>
  <dt href="67">Baby &amp; Toddler Clothing </dt>
  <dd href="572">Baby Clothing Accessories </dd>
  <dd href="573">Baby Shoes</dd>
</dl>

＆＃13;

var data = [
  [{
    "id": "67",
    "name": "Baby & Toddler Clothing "
  }, {
    "id": "68",
    "name": "Kids' Clothing, Shoes & Accessories"
  }, {
    "id": "69",
    "name": "Costumes, Reenactment Theater"
  }],
  [
    [{
      "id": "572",
      "name": "Baby Clothing Accessories "
    }, {
      "id": "573",
      "name": "Baby Shoes"
    }],
    [{
      "id": "579",
      "name": "Boys Clothing [Sizes 4 & Up] "
    }, {
      "id": "580",
      "name": "Boys Shoes"
    }],
    [{
      "id": "588",
      "name": "Costumes"
    }, {
      "id": "589",
      "name": "Reenactment & Theater "
    }]
  ]
]
if (data.length > 0) {
  var content = $("#content");
  firstdata = data[0];
  secdata = data[1];

  for (var i = 0; i < firstdata.length; i++) {
   // var d =  $( document.createElement('dl') );
    var dtHTML = "<dt href='" + firstdata[i].id + "'>" + firstdata[i].name + "</dt>";

    for (var j = 0; j < secdata.length; j++) {
      if (secdata[i][j] !== undefined) {
        dtHTML += "<dd href='" + secdata[i][j].id + "'>" + secdata[i][j].name + "</dd>";
      }
    }
    $("#content").append('<dl>'+dtHTML+'</dl>');
  }
} else {
 console.log('no item for this categories');
}

＆＃13;

dl{
  border:1px solid red;
  height: 100px;
  width: 300px;
}

＆＃13;

Answer 3

您也可以使用Javascript

if(data.length > 0) {
    var content = document.getElementById('content');
    firstdata = data[0];
    secdata = data[1];
    var dl = document.createElement('dl');
    for (var i = 0; i < firstdata.length; i++) {

        var dt = document.createElement('dt');
        dt.href = firstdata[i].id;
        dt.append(document.createTextNode(firstdata[i].name));
        dl.append(dt);

        for (var j = 0; j < secdata.length; j++) {
            if (secdata[i][j] !== undefined) {
                var dd = document.createElement('dd');
                dd.href = secdata[i][j].id;
                dd.append(document.createTextNode(secdata[i][j].name));
                dl.append(dd);
            }
        }
    }
    content.append(dl);
}
else
{
    console.log('no item for this categories');
}

Answer 4

您可以使用template string (``) backticks。

以更简单的方式解决您的问题

使用这些backticks(``)创建您的html结构，然后将内容附加到div

＆＃13;

var data = [
  [{
    "id": "67",
    "name": "Baby & Toddler Clothing "
  }, {
    "id": "68",
    "name": "Kids' Clothing, Shoes & Accessories"
  }, {
    "id": "69",
    "name": "Costumes, Reenactment Theater"
  }],
  [
    [{
      "id": "572",
      "name": "Baby Clothing Accessories "
    }, {
      "id": "573",
      "name": "Baby Shoes"
    }],
    [{
      "id": "579",
      "name": "Boys Clothing [Sizes 4 & Up] "
    }, {
      "id": "580",
      "name": "Boys Shoes"
    }],
    [{
      "id": "588",
      "name": "Costumes"
    }, {
      "id": "589",
      "name": "Reenactment & Theater "
    }]
  ]
]
if (data.length > 0) {
  var content = $("#content");
  var dlList = data[0].map((dt, index) => {
    var ddList = data[1][index].map(dd => {
      return `<dd>${dd.name}</dd>`;
    }).join('');
    return `<dl>
      <dt>${dt.name}</dt>
      ${ddList}
    </dl>`;
  }).join('');
  content.append(dlList);
} else {
 console.log('no item for this categories');
}

＆＃13;

dl{
  border:1px solid red;
  height: 100px;
  width: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

＆＃13;

如何创建dl标签并在其中显示数据

4 个答案: