如何在jQuery中为父母的兄弟姐妹设置左上角位置？

Question

在这里，我的html代码，

<ul>
  <!-- Group1 -->
  <li class="a1 mainParent"><a href="#">1</a></li>
  <li class="a1 child-up" style="left:0; top:-68px"><a href="#">11</a></li>
  <li class="a1 child-up" style="left:0; top:-34px"><a href="#">12</a></li>
  <li class="a1 child-down" style="left:0; top:34px"><a href="#">13</a></li>
  <li class="a1 child-down" style="left:0; top:68px"><a href="#">14</a></li>

  <!-- Group2 -->
  <li class="a2 mainParent"><a href="#">2</a></li>
  <li class="a2 child-up" style="left:68px; top:-68px"><a href="#">21</a></li>
  <li class="a2 child-up" style="left:68px; top:-34px"><a href="#">22</a></li>
  <li class="a2 child-down" style="left:68px; top:34px"><a href="#">23</a></li>
  <li class="a2 child-down" style="left:68px; top:68px"><a href="#">24</a></li>
</ul>

现在，我在行内写了左和上位置。 如何使用jquery实现此功能？

不仅会有两个小组，将来还会增加更多的小组。 但是，这种html结构将永远不会改变。

输出结构：

Answer 1

当您可以使用CSS时，为什么要使用jQuery？

.a1.mainparent div[class^="child-"] {
   left: 0;
}

.a2.mainparent div[class^="child-"] {
   left: 68px;
}

/*etc*/

class^是通配符，表示“任何以...开始的类”。 您还可以使用class* ，这意味着“包含任何类”，但是您最好使用class^ 。