有没有办法将两个元素动态包装到一个div如果他们存在？

Question

我有一个Angular应用程序根据是否需要呈现跨度（很多ng-if）。我需要基于内容/类名称将这些跨度包裹在一个div中。

因此，举例来说：

<div class="1"></div> 
<div class="2"></div> 
<div class="3"></div> 

我不想做任何事情。但随着

<div class="1"></div> 
<div class="2"></div> 
<div class="3"></div> 
<div class="4"></div> 

我确实想在父DIV <div class="parent"></div>来包装这些4个格，但只有四个出现一个接一个。有没有办法在CSS中做到这一点？如果连续出现，我可以使用一组选择器来操纵这四个元素吗？

Answer 1

所以你不能这样使用CSS和html，就像上面的注释一样，你需要使用某种形式的javascript来操纵dom。继承人使用jQuery的一个例子。希望能帮助到你！

$(document).ready(function() { 
 
    $('.wrapme').each(function() { 
 
     var myElement = $(this); 
 
     var next1 = $(this).next(); 
 
     var next2 = $(this).next().next(); 
 
     var next3 = $(this).next().next().next(); 
 
     if (next1.hasClass('wrapme') && next2.hasClass('wrapme') && next3.hasClass('wrapme')) { 
 
      var html = '<div class="parent"></div>'; 
 
      next3.after(html); 
 
      var parent = next3.next('.parent') 
 
      parent.append(myElement); 
 
      parent.append(next1); 
 
      parent.append(next2); 
 
      parent.append(next3); 
 
     } 
 
    }); 
 
});

.parent { 
 
    background-color:lightgray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapme">1</div> 
 
<div class="wrapme">2</div> 
 
<div class="wrapme">3</div> 
 
<span>BREAKKKKKK</span> 
 
<div class="wrapme">1</div> 
 
<div class="wrapme">2</div> 
 
<div class="wrapme">3</div> 
 
<div class="wrapme">4</div> 
 
<span>BREAKKKKKK</span> 
 
<div class="wrapme">1</div> 
 
<div class="wrapme">2<div> 
 
<span>BREAKKKKKK</span> 
 
<div class="wrapme">1</div> 
 
<div class="wrapme">2</div> 
 
<div class="wrapme">3</div> 
 
<div class="wrapme">4</div> 
 
<span>BREAKKKKKK</span> 
 
<span>BREAKKKKKK</span> 
 
<div class="wrapme">1</div> 
 
<div class="wrapme">2</div> 
 
    <a href=""> hey hey</a> 
 
<div class="wrapme">3</div> 
 
<div class="wrapme">4</div> 
 
<span>BREAKKKKKK</span>