Оберните смежные <p>элементы в <div> - PullRequest
0 голосов
/ 02 июля 2019

Можно ли выбрать все <p> элементы, которые расположены рядом друг с другом, и обернуть их в <div>?

например. У меня

<div class="content">
  <p>one</p>
  <p>two</p>
  <h2> not p</h2>
  <p>three</p>
  <p>four</p>
  <p>five</p>
  <h3>not p</h3>
  <div>not p</div>
  <p>six</p>
 <p>seven</p>
</div>

И я бы хотел получить что-то вроде этого:

<div class="content">
  <div class="wrap">
    <p>one</p>
    <p>two</p>
  </div>
  <h2> not p</h2>
  <div class="wrap">
    <p>three</p>
    <p>four</p>
    <p>five</p>
  </div>
  <h3>not p</h3>
  <div>not p</div>
  <div class="wrap">
    <p>six</p>
    <p>seven</p>
  </div>
</div>

Ответы [ 2 ]

2 голосов
/ 02 июля 2019

Попробуйте, это хорошая отправная точка:

$(function(){

  const target = 'p',
        invert = ':not(' + target + ')',
        wrap = '<div class="wrapper">',
        breakpoints = $('.content > *'+invert);
    
   breakpoints.each(function(){
        $(this).nextUntil(invert).wrapAll( wrap );
    });
    
   breakpoints.first().prevUntil(invert).wrapAll( wrap );
    
});
.wrapper{border:1px solid red;}
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<div class="content">
  <p>one</p>
  <p>two</p>
  <h2> not p</h2>
  <p>three</p>
  <p>four</p>
  <p>five</p>
  <h3>not p</h3>
  <div>not p</div>
  <p>six</p>
  <p>seven</p>
</div>
1 голос
/ 02 июля 2019

Ну, алгоритм довольно прост: переберите массив из <p> узлов и бросьте элемент в предыдущий .wrapper, если предыдущий брат - .wrapper, или создайте его в противном случае:

[...$('p')].forEach((p,i) => 
  $(p).prev().is('.wrapper') && i > 0  ?
  $(p).prev().append(p) : 
  $('<div class="wrapper"></div>').insertBefore(p).append(p))
.wrapper {background: lightblue}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="content"><p>one</p><p>two</p><h2> not p</h2><p>three</p><p>four</p><p>five</p><h3>not p</h3><div>not p</div><p>six</p><p>seven</p></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...