jquery – 用标签包装文本

2023年10月19日 196次阅读

我想让jQuery在文本输入之前在“untagged”元素上设置标签.但是,它似乎是在前一个标签上设置标签.我无法在代码中手动设置标签,因为它是自动生成的,并且插件开发人员已删除表单字段上的标签.这是我目前的一个字段的代码：

<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包装标签.如果我说要选择第二个元素,它会选择输入字段.我想在中间使用文本.我的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,但由于我只使用标签进行造型,我想我现在应该可以了.)

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

最佳答案

$(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

点赞