重新排列DOM元素 [英] Re-arrange DOM elements

问题描述

我有以下代码：

 < div class =grp-row grp-cells-1> 
< div class =l-2c-fluid l-d-4> 
< div class =c-1> 
< label for =sometext>标签< / label> 
< / div> 
< div class =c-2> 
< select id =sometextname =somename> 
< option value =selected =selected>选项< / 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> 
< / div> 
< div class =c-2> 
< select id =sometextname =somename> 
< option value =selected =selected>选项< / 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都必须附加到其正确的父项。
解决方案
您是否尝试过这种方法？
 
 
 
 
 
 
  var content = $（'。grp-help'）。html（）; $（' -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 =1-2c-流体1-d-4> < div class =c-1> < label for =sometext>标签< / label> < / DIV> < div class =c-2> < select id =sometextname =somename> < option value =selected =selected>选项< / option> < /选择> < p class =grp-help> bla< / p> < / DIV> < / div>< / div>  
 
 
 
 
I have the code below:
<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>
I want to change the p.grp-help to span.grp-help, rearrange the DOM, and move the span.grp-help inside the div c-1 before the label. So the final DOM will be: 
<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>
How to do it with jQuery? 

Edit:
I've tried the following so far, but it results in duplicating the span x times in each c-1 div. 
$("p.grp-help").replaceWith(function() { return '<span class="grp-help">' + this.innerHTML + '</span>'; });
$('span.grp-help').appendTo('div.c-1');
Note: the parent div (grp-row grp-cells-1) will exist multiple times, and (span grp-help) in each one will have different text, so each span must be attached to its correct parent item.
解决方案
Have you tried this approach?



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>





                        
这篇关于重新排列DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！