Получить все элементы между типом элемента (h1) и обернуть в div

У меня есть следующая структура:

<div class="wrapper">
    <h1>Header 1</h1>
    <h2>subtitle 1</h2>
    <p>aaa</p>
    <p>bbb</p>
    <p>ccc</p>
    <h2>subtitle2</h2>
    <p>ddd</p>

    <h1>Header 2</h1>
    <h2>subtitle 3</h2>
    <p>eee</p>
    <p>fff</p>

</div>

Я хочу выбрать все элементы h1 и p между каждым h1 и обернуть их в div, поэтому я получаю:

<div class="wrapper">
    <div>
        <h1>Header 1</h1>
        <h2>subtitle 1</h2>
        <p>aaa</p>
        <p>bbb</p>
        <p>ccc</p>
        <h2>subtitle2</h2>
        <p>ddd</p>
    </div>

    <div>
        <h1>Header 2</h1>
        <h2>subtitle 3</h2>
        <p>eee</p>
        <p>fff</p>
    </div>
</div>

Я пробовал разные вещи, подобные приведенным ниже, но ни одна из них не работает идеально:

$( "h1" ).prevUntil( "h1" ).wrapAll( "<div></div>" );

Зачем вам использовать prevUntil(), когда вы пытаетесь найти элементы, следующие за элементом <h1> (до следующего <h1>? Я бы предложил переключить это на nextUntil().

David Thomas 09.04.2022 15:00
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
1
30
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий
  1. Вы должны использовать .каждый API jQuery для выполнения.
$("h1").each(function(){})
  1. .prevUntil будет инвертировать обход узла Dom, вместо этого используйте .nextUntil.

  2. что касается конечного вывода, сценарий выглядит следующим образом:

<script>
    $("h1").each(function() {
        $(this).nextUntil( "h1" ).wrapAll( "<div></div>" );
        // uncomment the two lines to move the h1 inside the wrapped div
        // const el = $(this).next();
        // $(this).prependTo(el);
    });
</script>

Спасибо, это близко, но он также оборачивает h1 внутри нового div. Я хочу, чтобы div находился под h1. есть идеи?

JackNapier 10.04.2022 02:43

На самом деле, если вы удалите последние две строки (строки 'const el' и '$(this)'), все будет работать отлично! Я приму это как ответ, если вы удалите эти строки

JackNapier 10.04.2022 02:47

Отредактировал ответ. Спасибо за принятый голос!🙏

mondayrris 10.04.2022 14:22

Я придумал это решение, в котором он получает всех дочерних элементов, а затем, если это тег h1, он создаст новый div и переместит в него H1 и другие дочерние элементы.

    var newDiv;
    $(document).ready(function(){
        $(".wrapper").children().each(function(){
           if($(this).is("h1")){
              $(this).before("<div></div>");
              newDiv =  $(this).prev();
              newDiv.append($(this));
           }else{
            newDiv.append($(this));
           }
        });
       
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">

        <h1>Header 1</h1>
        <h2>subtitle 1</h2>
        <p>aaa</p>
        <p>bbb</p>
        <p>ccc</p>
        <h2>subtitle2</h2>
        <p>ddd</p>

        <h1>Header 2</h1>
        <h2>subtitle 3</h2>
        <p>eee</p>
        <p>fff</p>
 
</div>

Другие вопросы по теме