使用 jQuery 从 JSON 向 <li> 添加 ID答案

【问题标题】：Adding ID to <li> from JSON with jQuery使用 jQuery 从 JSON 向 <li> 添加 ID
【发布时间】：2015-07-28 08:38:37
【问题描述】：

我从 JSON 文件中获取一些数据，我这样做：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON Sample</title>
</head>
<body>
<div id="placeholder"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
    $.getJSON('http://1xxxxxx:xx/vvccvyC_19-90.json',
   function(data) {
    var output="<ul>";
    for (var i in data.lbclassic) {     
            if (data.lbclassic[i].ageinweeks==19) {
    alert('ok');
    } 

    output+="<li id="/data.lbclassic[i]
    .ageinweeks/">" +                data.lbclassic[i].ageinweeks + "--" + 
    data.lbclassic[i].cumul + "--" +
    data.lbclassic[i].perhh+ "--" + 
    data.lbclassic[i].perhd+ "--" + 
    data.lbclassic[i].eggweightinweek+ "--" 
    + data.lbclassic[i].eggmasscumul1+ "--"
    + data.lbclassic[i].
    eggmassinweek+ "--" +          data.lbclassic[i].eggmasscumul
    +"</li>";
    }

    output+="</ul>";
    document.getElementById("placeholder").innerHTML=output;
    });
    </script>
    </body>
    </html>

稍后我想显示或隐藏列表中的一些元素，为此我需要它们的 ID。如何将 ID 添加到每个 <li> 元素？我希望该 ID 是我带来的 data.lbclassic[i].ageinweeks 数据。

举个例子。这是我从 JSON 中带来的第一行：<li>19--0.7--10--10--45--45--4.5--0.03</li>，我希望它是 <li id=19>19--0.7--10--10--45--45--4.5--0.03；我尝试了各种解决方案，但都没有奏效，我要么得到 NaN 错误，要么只是我添加的文本而不是数字本身。我阅读了有关堆栈的各种线程，但没有一个来自 JSON。

编辑：这里是 JSON

{
"lbclassic": [
    {
        "ageinweeks": 19,
        "cumul": 0.7,
        "perhh": 10,
        "perhd": 10,
        "eggweightinweek": 45,
        "eggmasscumul1": 45,
        "eggmassinweek": 4.5,
        "eggmasscumul": 0.03
    },
    {

【问题讨论】：

你能告诉我们json字符串的格式吗
当然，我已将其添加到主帖中。
为什么你的id 包含两次 19 ?? id=19>19--0.7...
我将 ID 添加到
元素中，以便稍后隐藏或显示，正如我所说，

$.getJSON('http://1xxxxxx:xx/vvccvyC_19-90.json', function(data) { var output="<ul>"; for (var i in data.lbclassic) { if (data.lbclassic[i].ageinweeks==19) { alert('ok'); } output+="<li id='"+data.lbclassic[i].ageinweeks+"'>" + +data.lbclassic[i].ageinweeks + "--" + data.lbclassic[i].cumul + "--" + data.lbclassic[i].perhh+ "--" + data.lbclassic[i].perhd+ "--" + data.lbclassic[i].eggweightinweek+ "--" + data.lbclassic[i].eggmasscumul1+ "--" + data.lbclassic[i]. eggmassinweek+ "--" + data.lbclassic[i].eggmasscumul +"</li>"; } output+="</ul>"; document.getElementById("placeholder").innerHTML=output; });

$(document).ready(function(){ var json = { "lbclassic": [ { "ageinweeks": 19, "cumul": 0.7, "perhh": 10, "perhd": 10, "eggweightinweek": 45, "eggmasscumul1": 45, "eggmassinweek": 4.5, "eggmasscumul": 0.03 }]}; var str = "<ul>"; $.each(json.lbclassic, function(index, element) { str += "<li id='" + element.ageinweeks + "--" + element.cumul +"--"+element.perhh+"'> test"; str += "</li>" }); str += "</ul>"; console.log(str); $("#placeholder").append(str); });