我有一个 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 中做到这一点?如果四个元素连续出现,我可以只使用选择器的组合来操作这四个元素吗?
最佳答案
所以你不能只使用 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>
关于html - 有没有办法动态地将两个元素包装到一个 div 中(如果它们存在)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28372437/