html - 有没有办法动态地将两个元素包装到一个 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>

我确实想将这 4 个 div 包装在父 div 中 <div class="parent"></div> ，但前提是四个依次出现。有没有办法在 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>