javascript - 重新排列 DOM 元素

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，并将 span.grp-help 移到 div c-1 中标签之前。所以最终的 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) 将存在多次，并且每次 (span grp-help) 中的文本都不同，因此每个 span 都必须附加到其正确的父项。

Answer 1

你试过这种方法吗？

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

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