Question

我有以下代码：

<div class="grp-row grp-cells-1">
    <div class="l-2c-fluid l-d-4">
        <div class="c-1">
            <label for="sometext">Label</label>
        </div>
        <div class="c-2">
            <select id="sometext" name="somename">
                <option value="" selected="selected">Option</option>
            </select>
            <p class="grp-help"></p>
        </div>
    </div>
</div>

我想将p.grp-help更改为span.grp-help，重新排列DOM，并在标签之前移动div c-1内的span.grp-help。所以最终的DOM将是：

<div class="grp-row grp-cells-1">
    <div class="l-2c-fluid l-d-4">
        <div class="c-1">
            <span class="grp-help"></span>
            <label for="sometext">Label</label>
        </div>
        <div class="c-2">
            <select id="sometext" name="somename">
                <option value="" selected="selected">Option</option>
            </select>
        </div>
    </div>
</div>

如何用jQuery做到这一点？

编辑：到目前为止，我已尝试过以下内容，但它会导致每个c-1 div中的跨度x次重复。

$("p.grp-help").replaceWith(function() { return '<span class="grp-help">' + this.innerHTML + '</span>'; });
$('span.grp-help').appendTo('div.c-1');

注意：父div（grp-row grp-cells-1）将存在多次，并且每个div（span grp-help）将具有不同的文本，因此每个span必须附加到其正确的父项。

Answer 1

你尝试过这种方法吗？

＆＃13;

var content = $('.grp-help').html();
$('.grp-help').remove();
$('.c-1').append('<span class="grp-help">' + content + '</span>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grp-row grp-cells-1">
  <div class="l-2c-fluid l-d-4">
    <div class="c-1">
      <label for="sometext">Label</label>
    </div>
    <div class="c-2">
      <select id="sometext" name="somename">
        <option value="" selected="selected">Option</option>
      </select>
      <p class="grp-help">bla</p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

为避免重复，您应该分开：

$element = $('span.grp-help');
$element.detach();
$element.appendTo('div.c-1');

重新安排DOM元素

2 个答案: