Question

我正在尝试让jQuery在＆＃34; untagged＆＃34;上设置标签。文本输入前的元素。但是，它似乎是在前一个标签上设置标签。我无法在代码中手动设置标签，因为它是自动生成的，并且插件开发人员已删除表单字段上的标签。这是我目前的一个领域的代码：

<div id="_dgx_donate_donor_first_name" class="text-input-section">
  <div id="_dgx_donate_donor_first_name-error-message" style="display:none" class="seamless-donations-error-message-field"></div>
  First Name:
  <input type="text" name="_dgx_donate_donor_first_name" value="" size="20" data-validate="required" id="text_dgx_donate_donor_first_name" class="text-box">
</div>

当我选择div中的第一个项目时，它会将标签包裹在_dgx_donate_donor_first_name-error-message div周围。如果我说要选择第二个元素，它会选择input字段。我想在中间使用文本。我的jQuery目前是：

$('#dgx-donate-container .text-input-section').each(function(){
  var c = 'text'+$(this).find('input[type="text"]').attr('name');
  $(this).find('input[type="text"]').attr('id', c).addClass('text-box');
  $(this).find(':first-child:not(#donation_header)').next().wrap('<label for="'+c+'" />');
});

不漂亮，但到目前为止似乎有效。（我想我还需要更改ID，但由于我只使用标签进行样式设计，我想我现在应该可以了。）

有关如何选择文字的任何建议？每个字段的格式与此字段完全相同。

Answer 1

$(function(){
    var div = $("#_dgx_donate_donor_first_name");
    var txt = $.trim(div.text());
    var txtNodes = div.contents().filter(function(){
        return this.nodeType === 3;
    }).remove();
    //console.log(txtNodes);
    //div.text("");    //don't do this, it will empty your div
    var input = div.find("input");
    var name = input.attr("name");
    var lbl = $("<label for='" + name + "'>" + txt + "</label>");
    lbl.insertBefore(input);

});

jsfiddle example

Answer 2

使用wrapInner，然后重新添加其他节点：

$('#dgx-donate-container .text-input-section').each(function(){
    var c = 'text'+$(this).find('input[type="text"]').attr('name');
    $(this).find('input[type="text"]').attr('id', c).addClass('text-box');
    firstDiv = $(this).children('div:first');
    input = $(this).children('input');
    $(this).wrapInner('<label for="'+c+'" />')
    .prepend(firstDiv)
    .append(input);
});

Example Fiddle

用标签包装文本

2 个答案: