Question

是否可以选择所有彼此相邻的<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>

我想得到一些东西，像这样：

{{1}}

Answer 1

尝试一下，这是一个很好的起点：

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

Answer 2

好吧，该算法非常简单：遍历<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>

将相邻的<p>元素包装为<div>

2 个答案: