jQuery操作DOM

Question

这是我在Wordpress-Plugin中的默认HTML标记：

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

准备好文档后，我想将HTML标记更改为此：

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

那是我实际上所做的：

$（'。gfield_checkbox> li'）。addClass（'checkbox checkbox-styled'）;

但是如何更改代码的其他部分？

Answer 1

要更改html，有几种方法可以做到。一种方法是使用跨度将文本包裹在内部，然后选择同级并将其添加到标签内部。

$("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>

Answer 2

详细信息在演示中进行了评论。

演示

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