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

为什么你想用jQuery做这个呢？你可以用CSS吗？

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

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

/*etc*/

class^是一个通配符，表示“任何以”开头的类“。您也可以使用class*，这意味着“包含任何类”，但在您的情况下，您也可以使用class^。