每个循环中的字符串自动拆分 - jquery答案

【问题标题】：string auto splitting in each loop - jquery每个循环中的字符串自动拆分 - jquery
【发布时间】：2013-07-01 23:02:25
【问题描述】：

我有以下 jquery 代码循环通过返回的 json 数据，由于某种原因，它在被分配为值而不是文本时将郊区分割为一个空格，我无法弄清楚为什么会发生这种情况。

我的代码

$.each(data , function( index, obj ) {
                    $.each(obj, function( key, value ) {
                        var suburb = $.trim(value['mcdl01']);
                        var number = $.trim(value['mcmcu']);
                         $("#FeedbackBranchName").append("<option value=" + suburb + ">" + suburb + " (" + number + ")</option>");
                    });
                });

返回结果示例

<option **value="AIRLIE" beach=""**>AIRLIE BEACH (4440)</option>
<option value="ASHMORE">ASHMORE (4431)</option>
<option **value="BANYO" commercial=""**>BANYO COMMERCIAL (4432)</option>
<option value="BEENLEIGH">BEENLEIGH (4413)</option>
<option value="BERRIMAH">BERRIMAH (4453)</option>
<option **value="BOWEN" hills=""**>BOWEN HILLS (4433)</option>

请注意，对于 AIRLEE BEACH、BANYO COMMERICAL 和 BOWN HILLS，第二个单词是如何从 value 属性中分离出来的，但在文本级别上没问题。

有人知道为什么会发生这种情况吗？

谢谢

【问题讨论】：

如果 HTML 属性的值包含空格，则该值必须用引号引起来。否则浏览器不知道什么是值的一部分，什么是属性。

标签： javascript jquery json foreach

【解决方案1】：

只需将你的属性值用引号括起来，这样它的一部分（在空格之后）就不会被视为新属性。

$("#FeedbackBranchName").append("<option value='" + suburb + "'>" + suburb + " (" + number + ")</option>");
                                                ^_________________________________

最好使用 jquery 元素构造函数。

 $("#FeedbackBranchName").append($('<option/>', {
    value: suburb,
    text: suburb + " (" + number + ")"
}));

【讨论】：

+1 正要建议您提供的第二种语法。不知道为什么有人会 DV 这个答案。
@CrazyTrain 不确定... :( 是的，我输入的是第二种语法... :)
不知道为什么你被否决了——不是我。我看不出这个答案有什么问题，尤其是现在您已经更新它以包含 jQuery 选项。
@jcsanyi 在为第一个选项添加箭头标记后几分钟前我取消了它...我猜在那之后被否决了...
是我，因为您的第一个建议只是一个创可贴，请稍作修改，以便我恢复投票。

【解决方案2】：

一般来说，在创建新的 HTML 元素时，最好让 jQuery 为您进行适当的转义：

$.each(obj, function( key, value ) {
    var suburb = $.trim(value['mcdl01']),
    number = $.trim(value['mcmcu']);

    $("#FeedbackBranchName").append($("<option/>", {
        value: suburb,
        text: suburb + " (" + number + ")"
    }));
});

您也可以使用Option 构造函数：

$("#FeedbackBranchName")
   .append(new Option(suburb + " (" + number + ")", suburb));

【讨论】：

【解决方案3】：

这是因为您没有在 value 属性周围加上引号。

实际生成的 HTML 是这样的：

<option value=AIRLIE BEACH>AIRLIE BEACH (4440)</option>

浏览器会这样解释：

<option value="AIRLIE" BEACH="">AIRLIE BEACH (4440)</option>

要解决此问题，您可以将值用引号括起来，如下所示：

$("#FeedbackBranchName")
    .append('<option value="' + suburb + '">' + suburb + " (" + number + ")</option>");

或者更好的是，使用 jQuery 设置值而不是将 HTML 构建为字符串：

$("#FeedbackBranchName").append(
    $("<option />")
        .val(suburb)
        .text(suburb + ' (' + number + ')')
);

【讨论】：