jQuery操纵DOM

问题描述 投票:0回答:2

这是我在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-Markup更改为:

<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');

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

javascript jquery dom-manipulation
2个回答
1
投票

要更改html,有几种方法可以做到。一种方法是用span填充文本,然后选择兄弟并将其添加到标签内。

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

0
投票

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

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>
© www.soinside.com 2019 - 2024. All rights reserved.