JQuery манипулирует DOM

это моя HTML-разметка по умолчанию из плагина Wordpress:

<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('флажок в стиле флажка');

Но как мне изменить другие части кода?

Постарайтесь свести свой вопрос к чему-то конкретному — одной вещи, которую вы не понимаете. В противном случае это просто учебник по jQuery.

— 23.02.2019 01:37

javascript jquery dom-manipulation

22.02.2019 23:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

Чтобы изменить 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>

22.02.2019 23:54

Подробности прокомментированы в демо.

Демо

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

23.02.2019 01:28