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>中，但前提是这四个div一个接一个地出现。有没有办法在CSS中这样做？如果它们连续出现，我可以使用一组选择器来操纵四个元素吗？

Answer 1

所以你不能只使用css和html这样做，就像上面的评论一样，你需要使用某种形式的javascript来操作dom。下面是一个使用jQuery的例子。希望它有所帮助！

＆＃13;

$(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);
        }
    });
});

＆＃13;

.parent {
    background-color:lightgray;
}

＆＃13;

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

＆＃13;

有没有办法动态地将两个元素包装成div它们存在？

1 个答案: