CODEWITHSUNDEEP
javascriptjquerydom-manipulation
TurtleOnTheBack
TurtleOnTheBack

Reputation: 7

jQuery manipulate DOM

this is my default HTML-Markup from the Wordpress-Plugin:

<ul class="gfield_checkbox" id="input_2_21">

    <li class="gchoice_2_21_1">
        <input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
        <label for="choice_2_21_1" id="label_2_21_1">Option One</label>
    </li>

    <li class="gchoice_2_21_2">
        <input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
        <label for="choice_2_21_2" id="label_2_21_2">Option Two</label>
    </li>

</ul>

After the document is ready I want to change the HTML-Markup to this:

<ul class="gfield_checkbox" id="input_2_21">

    <li class="gchoice_2_21_1 checkbox checkbox-styled">
        <label for="choice_2_21_1" id="label_2_21_1">    
            <input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
            <span>Option One</span>    
        </label>
    </li>

    <li class="gchoice_2_21_2 checkbox checkbox-styled">
        <label for="choice_2_21_2" id="label_2_21_2">    
            <input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
            <span>Option Two</span>    
        </label>
    </li>

</ul>

Thats what I actually did:

$('.gfield_checkbox > li').addClass('checkbox checkbox-styled');

But how do I change the other parts of the code?

Upvotes: 0

Views: 49

Answers (2)

zer00ne
zer00ne

Reputation: 44086

Details are commented in demo.

Demo

/*
On each <li>...
- ...add class .checkbox and .checkbox-styled
- Find each <label> and <input> nested in each <li>
- Remove the text from the <label>...
  - ...append the <input> to <label>...
  - ...append a <span> to <label>...
  - ...insert the value of <input> as the text of the <span>
*/
$('li').each(function(i) {
 $(this).addClass('checkbox checkbox-styled');
 var label = $(this).find('label');
 var input = $(this).find('input');
 label.text('').append(input).append(`<span>${input.val()}</span>`);
});
<ul class="gfield_checkbox" id="input_2_21">

    <li class="gchoice_2_21_1">
        <input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
        <label for="choice_2_21_1" id="label_2_21_1">Option One</label>
    </li>

    <li class="gchoice_2_21_2">
        <input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
        <label for="choice_2_21_2" id="label_2_21_2">Option Two</label>
    </li>

</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

epascarello
epascarello

Reputation: 207557

To change the html, there is a few ways to do it. One way is to wrap the text inside with the span, and than select the sibling and add it inside of the label.

$("li")
 .addClass("checkbox checkbox-styled")
 .find("label")
   .wrapInner("<span/>")
     .each(function(){
       label = $(this)
       label.prepend(label.prev())
     })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="gfield_checkbox" id="input_2_21">

    <li class="gchoice_2_21_1">
        <input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1">
        <label for="choice_2_21_1" id="label_2_21_1">Option One</label>
    </li>

    <li class="gchoice_2_21_2">
        <input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2">
        <label for="choice_2_21_2" id="label_2_21_2">Option Two</label>
    </li>

</ul>

Upvotes: 1

Related Questions