如何在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^ 。