遍历 JSON - 将 JSON 元素与 DOM 元素匹配？答案

【问题标题】：traverse JSON - matching JSON elements to DOM elements?遍历 JSON - 将 JSON 元素与 DOM 元素匹配？
【发布时间】：2012-05-11 02:05:54
【问题描述】：

如何遍历 JSON，循环遍历 DOM 和 JSON 以匹配 json 元素到 DOM 中的元素？

我有html：

<div class="input alpha grid_4">
<label for="enterEmail">Email Address<label>
<input id="enterEmail"  name="enterEmail" type="text" />
<span class="validMark"></span>
</div>

json 渲染后我想要它：

<div class="input alpha grid_4">
<label for="enterEmail">Email Address <a class="toolTip" href="#" title=" By providing us with an email address for your user name, you are more likely to remember it."></a></label>
<input id="enterEmail"  name="enterEmail" type="text" />
<span class="validMark"></span>
<div class="helperText">john@test.com</div>
</div>

还有 json：

[
     {
           “field”:  “enterEmail”,
           “contextHelpText”:  “By providing us with an email address for your user name, you are more likely to remember it.”,
           “helperText”:  “john@test.com”
     },
     {
           “field”:  “billAddress1”,
           “contextHelpText”:  “Please enter the address associated with your billing information.” 
     }
]

我在概念化循环如何运行时遇到问题，如果 json 中不存在 helpertext 或 contexHelpText，如何解决这个问题。（将它们放在 json 中会更好，但没有价值吗？）

【问题讨论】：

问题是，要循环什么[，什么部分是完全动态的？我假设 JSON 数据，但它可能是相反的方式。这个问题需要更好的解释，拜托。
@SpYk3HH - 我想使用 json 将元素附加到 DOM。 json 将是所有表单元素的完整列表，将 contextHelp 和 helperText（如果存在）指定到 json 指定的 DOM 中的字段 - "field"
在这种情况下，我会修改 Amadan 给出的答案并按照最终结果所需的顺序构建

标签： jquery json dom getjson traversal

【解决方案1】：

var numFields = jsonData.length;
var i, field, $field, $helper;
for (var i = 0; i < numFields; i++) {
  field = jsonData[i];
  $field = $(field.field);
  if (field.contextHelpText) {
    $field.attr('title', field.contextHelpText);
  }
  $helper = $field.parent().children('.helperText');
  if ($helper && field.helperText) {
    $helper.html(field.helperText);
  }
}

杂乱无章，但无法更好地满足您的要求。

【讨论】：

嘿 Amadan，你是什么意思 - 我可以详细说明什么来澄清我的问题吗？
事实上.helperText 与helperText 应该驻留的字段在结构上是如此无关；我可能还会将 JSON 字段的名称与它们转到的 HTML 属性的名称统一起来。
让容器 div 有一个 id 是否有意义？
嗯...我不知道。如果您可以向自己保证.helperText 将永远存在于您可以为其编写普遍适用的访问器的地方（例如此处的$field.parent().children('.helperText')），那很好。有用。 :p
嗯，helpertext 将存在于某些字段而不是其他字段 - 想知道如何适当地构建它

【解决方案2】：

也许是这样的：？？？ (jsFiddle)

$(function() {
    var jDat = [
        {
            "field":  "enterEmail",
            "label":  "Enter Email",
            "contextHelpText":  "By providing us with an email address for your user name, you are more likely to remember it.",
            "helperText":  "john@test.com"
        },
        {
            "field":  "billAddress1",
            "label":  "Bill Address 1",
            "contextHelpText":  "Please enter the address associated with your billing information." 
        }
    ];

    for (i=0;i<jDat.length;i++) {
        var newDiv = $("<div />").addClass("input alpha grid_4"), // or could draw from json data on if statemtn for the classes
            newDat = jDat[i];

        if (newDat['field']) {
            var newLbl = $("<label />").attr("for", newDat.field).text(newDat.label).appendTo(newDiv), // you'll need to add data for label of each field
                newInp = $("<input />").attr({ id: newDat.field, name: newDat.field, type: "text" }).appendTo(newDiv);
                newSpn = $("<span />").addClass("validMark").appendTo(newDiv)

            if (newDat['contextHelpText']) newLbl.append($("<a />").attr({ href: 'javascript:void(0)', title: newDat.contextHelpText }).addClass("toolTip"));
            if (newDat['helperText']) newDiv.append($("<div />").addClass("helperText").text(newDat.helperText));

            $("#contentArea").append(newDiv);
        };
    };
});

【讨论】：

看起来不错，只是字段和标签已经存在于html中。这就是诀窍。
你能提供更多的例子吗？也许是 jsfiddle 或某种沙盒链接？我的意思是，如果 json 数据是动态的，那么 html 怎么可能已经存在了？我对你打算走的路线感到困惑

【解决方案3】：

在对 SO 进行了大量输入和其他问题之后，我最终得到的是。

function addInfoHTML(data) {

    if (typeof data != 'undefined' && data.length > 0) {
        var i;
        for (i = 0; i < data.length; i++) {
            var $fieldDom = $('#' + data[i].field);
            //make sure field dom exists
            if ($fieldDom.length > 0) {
                var parentDiv = $fieldDom.parents('div.input');

                if (typeof data[i].contextHelpText != 'undefined') {
                    //find the first label from the input.div
                    var fieldLabel = $(parentDiv).find('label'),
                        $fieldLabel = $(fieldLabel),
                        ancHtml = " <a class='toolTip' href='#' alt='" + data[i].contextHelpText + "' title='" + data[i].contextHelpText + "'>some val</a>";

                    //append fieldLabel text(Enter Email) + ancHtml (tooltip)
                    $fieldLabel.html($fieldLabel.text() + ancHtml);
                }

                if (typeof data[i].helperText != 'undefined') {
                    var helperDiv = "<div class='helperText'>" + data[i].helperText + "</div>";
                    //append the helperDiv html at the end
                    $(parentDiv).append(helperDiv);
                }
            }
        }
    }
}


//on document ready call the addInfoHtml by passing json data
$(function(){
    addInfoHTML(data);
});

【讨论】：