1

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.

3
  • Can you post youe attempt so far? As to what you'bve tried? Oct 5, 2015 at 1:24
  • Think is easier if you just remove <p class="grp-help"></p> before get its content and add a new <span class="grp-help"></span> and put content inside. Don't you? Oct 5, 2015 at 1:35
  • The problem is that there's not only one instance, div.grp-row exist multiple times, and each grp-help has it's own text, so i need each span attached to it's parent. Oct 5, 2015 at 1:39

2 Answers 2

2

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>

2
  • It works for the first item only, if i have 3 <div class="grp-row grp-cells-1"> then it'll get the content of first span inserted into the 2nd and 3rd span see this fiddle: jsfiddle.net/z5o3pxn6 Oct 5, 2015 at 2:01
  • Here's one that loops with the same principle but using .each() in this way will likely work with your original function as well since that actually looks quite good : codepen.io/anon/pen/rOybjN?editors=001.
    – Shikkediel
    Oct 5, 2015 at 2:54
1

To avoid duplication you should detach:

$element = $('span.grp-help');
$element.detach();
$element.appendTo('div.c-1');
1
  • If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned: api.jquery.com/appendto
    – Shikkediel
    Oct 5, 2015 at 1:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.