Question

我正在尝试使用jQuery在以下代码中添加div：

<div class="fsSubField">
<input id="field15744501-zip" class="fsField fsFieldZip fsFormatZipCA" type="text" value="" size="8" name="field15744501-zip">
<br>
<label class="fsSupporting" for="field15744501-zip">Postal Code</label>
</div>

所以我最终得到了：

<div class="fsSubFieldGroup" style="margin-top:5px;">
<div class="fsSubField">
<input id="field15744501-zip" class="fsField fsFieldZip fsFormatZipCA" type="text" value="" size="8" name="field15744501-zip">
<br>
<label class="fsSupporting" for="field15744501-zip">Postal Code</label>
</div>
</div>

我尝试了以下内容：

$('input.fsFormatZipCA').parent().before('<div> class="fsSubFieldGroup" style="margin-top:5px;">');
$('input.fsFormatZipCA').parent().after('</div>');

由于表单的动态特性，我需要能够将select设置为'input.fsFormatZipCA'

我认为这会有效，但问题是jQuery正在执行以下操作：

<div class="fsSubFieldGroup" style="margin-top: 5px;"></div>
<div class="fsSubField">
<input id="field15744501-zip" class="fsField fsFieldZip fsFormatZipCA" type="text" value="" size="8" name="field15744501-zip">
<br>
<label class="fsSupporting" for="field15744501-zip">Postal Code</label>
</div>

Answer 1

您似乎在寻找.wrap：

$('input.fsFormatZipCA').parent().wrap(
  $('<div>', {
    'class': 'fsSubFieldGroup',  // class is a reserved word
    css: {
      'margin-top': 5  // - is an invalid identifier character
    }
  })
);

.before在元素前插入元素。它不会通过明显地添加HTML字符串来构造HTML。

Answer 2

使用.wrap()：

$('input.fsFormatZipCA').parent().wrap('<div class="fsSubFieldGroup" style="margin-top:5px;">');

jQuery文档中的更多信息：http://api.jquery.com/wrap/

旁注：您可能会注意到.wrap()函数为您添加了</div>。它使事情变得更容易。

Answer 3

我建议：

$('.fsFormatZipCA').parent().wrap('<div class="fsSUbFieldGroup" />');

使用jQuery：使用.before（）在另一个div中包装div

3 个答案: