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

Question

如何遍历 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中会更好，但没有价值吗？）

Answer 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);
  }
}

凌乱，但不能更好地满足您的要求。

Answer 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);
        };
    };
});​

Answer 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);
});