我需要以这种方式在容器上对一组3个div进行排序。
div class A
div class A
div class B
div class A
div class A
div class B
每个第3个div必须是B级,我怎么能这样做,然后将新订单推送到容器?
谢谢,
答案 0 :(得分:0)
为了帮助您入门,这是您可以解决问题的众多方法之一。
此示例使用querySelectorAll查找两种类型的块。然后它使用循环将块移动到所需的顺序。
要查看完整演示,请单击“显示代码段”,然后单击蓝色的“运行代码”按钮。
function sort(e) {
var a, b, i;
a = e.querySelectorAll('.noticia:not(.publicidad)');
b = e.querySelectorAll('.noticia.publicidad');
for (i = 0; i < b.length; i++) e.insertBefore(b[i], a[2 + i * 2]);
}
function sort(e) {
var a, b, i;
a = e.querySelectorAll('.noticia:not(.publicidad)');
b = e.querySelectorAll('.noticia.publicidad');
for (i = 0; i < b.length; i++) e.insertBefore(b[i], a[2 + i * 2]);
}
function test() {
var i, e = document.getElementsByClassName('carrusel');
for (i = 0; i < e.length; i++) sort(e[i]);
}
.carrusel {
height: 20px;
width: 100%;
display: table;
background-color: lightgray;
border: 1px black solid;
font-family: sans-serif;
margin-bottom: 4px;
}
.carrusel .noticia {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100%;
border-right: 1px black solid;
}
.carrusel .publicidad {
background-color: firebrick;
color: white;
}
.carrusel:last-child {
border: none;
}
<button onclick="test()">Test</button> Click to sort by class name ( AA-B-AA-B... )
<p>
<div class="carrusel">
<div class="noticia">A1</div>
<div class="noticia">A2</div>
<div class="noticia publicidad">B2</div>
<div class="noticia publicidad">B1</div>
<div class="noticia">A3</div>
<div class="noticia">A4</div>
</div>
<div class="carrusel">
<div class="noticia">A1</div>
<div class="noticia publicidad">B1</div>
<div class="noticia">A2</div>
<div class="noticia publicidad">B2</div>
<div class="noticia">A3</div>
<div class="noticia">A4</div>
</div>
Any number of elements...
<div class="carrusel">
<div class="noticia publicidad">B1</div>
<div class="noticia">A1</div>
<div class="noticia">A2</div>
<div class="noticia">A3</div>
<div class="noticia">A4</div>
<div class="noticia publicidad">B2</div>
<div class="noticia">A5</div>
<div class="noticia publicidad">B3</div>
<div class="noticia">A6</div>
<div class="noticia publicidad">B4</div>
<div class="noticia">A7</div>
<div class="noticia">A8</div>
</div>
Odd number of elements...
<div class="carrusel">
<div class="noticia">A1</div>
<div class="noticia publicidad">B1</div>
<div class="noticia">A2</div>
<div class="noticia publicidad">B2</div>
<div class="noticia">A3</div>
</div>