javascript - 附加的跨度标签没有分配文本

Question

我正在尝试遍历一组选中的复选框并将每个复选框的文本作为跨度附加到 div 中。我已经尝试使用选项标签进行选择，并且效果很好，但是使用跨度标签进行操作时，文本似乎没有显示。

$.each(elms, function(index, value) {
    var textVal;
    textVal = $.trim($(value).parent().text());
    return $('#narrowSic').append($('<span class=label>', {
        text: textVal
    }));
});​

这是它正在使用的 HTML：

  <div id="filteredSicDiv">
        <a href="javascript: void(0)">Clear</a>
        <div id="narrowSic" class="labelParent">
                  Sic:</div>
  </div>

Answer 1

我相信对于棘手的部分，您真正想要的代码类似于我附加到正文以进行调试的注释：

$(document.body).append($('<span />', {
    "text": textVal,
    "class": 'label'
}));​

请参阅http://api.jquery.com/jQuery/#jQuery2上的 jQuery 文档并注意以下警告：

在传递复杂的 HTML 时，某些浏览器可能无法生成完全复制所提供的 HTML 源的 DOM。

所以你更新的片段是：

$.each(elms, function(index, value) {
    var textVal = $.trim($(value).parent().text());
    return $('#narrowSic').append($('<span />', {
        "text": textVal,
        "class": 'label'
    }));
});

这假定在所有情况下，您的价值textVal都按预期工作。

Answer 2

$.each(elms, function(index, value) { 
    var textVal; 
    textVal = $.trim($(value).parent().text()); 
    $('#narrowSic').append($('<span class=label>' + textVal + '</span>')); 
});

Answer 3

您可以使用以下功能设置文本.text()：

$.each(elms, function(index, value) {
     var textVal;
     textVal = $.trim($(value).parent().text());
     return $('#narrowSic').append($('<span class="label">').text(textVal));
});