jQuery - Стиль по порядку появления элемента внутри другого элемента?

Question

Вот моя проблема.

HTML

<ul id="content"> 
     <li id="item1"> 
     <ul id="menu"> 
      <li id="menu-item1"> 
      <ul class="sub-menu"> 
       <li>........</li></ul></li> 
.................................................... 
      <li id="menu-item10"> 
      <ul class="sub-menu"> 
       <li>........</li></ul></li> 
     </ul></li> 
    </ul> 

Как я могу изменить CSS верхней части каждой уль подменю # следующими?

1-sub menu top: -8px 
2-sub menu top: -40px 
3-sub menu top: -72px 
step = -32px 
and so on ... 
10-sub menu top: - ###px 

Извините, ребята, я нашел свою синтаксическую ошибку .... вот мой код. Я буду признателен, если у вас есть более одного;)

$('ul.sub-menu').each(function() { 
    $(this).css('top', (-8 + $(this).index('ul.sub-menu') * -32)); 
}); 

Answer 1

Существует, как это может быть сделано с помощью CSS:

ul#menu{ 
 
    margin-top:-24px; 
 
} 
 
ul#sub-menu{ 
 
    margin-top:32px; 
 
}

<ul id="menu"> 
 
     <li id="menu-item1"> 
 
      <ul id="sub-menu"> 
 
       <li>........</li> 
 
      </ul> 
 
     </li> 
 

 
     <li id="menu-item2"> 
 
      <ul id="sub-menu"> 
 
       <li>........</li> 
 
      </ul> 
 
     </li> 
 
    
 
     <li id="menu-item3"> 
 
      <ul id="sub-menu"> 
 
       <li>........</li> 
 
      </ul> 
 
     </li> 
 
</ul>

Answer 2

Вы можете использовать следующую функцию в документе готового метода, подобный

jQuery('ul#content ul[id=sub-menu]').each(function(){ 
    jQuery(this).css('top', jQuery('>li',jQuery(this).parent().parent()).index(jQuery(this).parent())*-32-8) 
}); 

Примечание: его комплекс, но отлично работает, проверьте здесь http://jsfiddle.net/siddhapura/reud3Lre/

Answer 3

Попробуйте это не так же, как вы хотели Fiddle

var len = $('ul').length; 
var top = 1; 
$('.sub-menu').each(function() { 


$(this).css({ 
    top: top 
}) 
top = top + top +8 
})