How to set left top position for siblings from parent in jquery?

Question

Here, my html code,

<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>

Now i wrote left and top position an inline. How can i achieve this functionality with jquery?

Not only two groups it will append more groups in future. But this html structure will never change.

Output structure:

Answer 1

Why do you want to do it with jQuery, when you can do it with CSS?

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

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

/*etc*/

The class^ is a wildcard that means "any class starting with". You can also use class* , which means "any class containing", but in your case you might as well use class^ .