如何设置从父母在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^。