두 요소를 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 명 div의 포장 싶어하지만 경우에만 네 하나씩 나타납니다. CSS에서이 작업을 수행 할 수있는 방법이 있습니까? 4 개의 요소가 연속적으로 나타나면 선택자의 콤보를 사용하여 조작 할 수 있습니까?

Answer 1

그래서 위의 설명처럼 CSS와 HTML을 사용하여이 작업을 수행하지 마십시오. dom을 조작하려면 javascript의 일부 양식을 사용해야합니다. 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>