2012-06-20 4 views
0

각 목록 항목의 z-index을 증가 시키려고합니다.각 목록 항목에 대한 증가분

이것은 내가 지금까지 뭘하려 :

var photos = $('ul'); 
    photos.each(function() { 

     var photos = $(this).children(); 
     var photosLen = photos.length; 
     if (photosLen > 1) { 
      photos.parent().addClass('album'); 
      var i = 0; 
      while (i < photosLen) { 

       $(this).children().css({ 
        'z-index': i 
       }); 
      } 
     } 

    }); 

나는 각 목록 항목이 z-index: 3;z-index: 1;에서 갈 것이라고 예상하지만, 그것은 그 일을 아니에요. 그냥 배열의 길이를 각 목록 항목에 추가합니다.

HTML (코드 첫 번째 않은 주문 목록에 적용됩니다)

<ul> 

    <li><img src="http://i.imgur.com/PuwwFs.jpg" alt=""></li> 
    <li><img src="http://i.imgur.com/cjAGks.jpg" alt=""></li> 
    <li><img src="http://i.imgur.com/zA4lCs.jpg" alt=""></li> 

    </ul> 
    <ul> 

     <li><img src="http://i.imgur.com/PuwwFs.jpg" alt=""></li> 


    </ul> 
+0

'photos.parent()'는'$ (this) '와 같지 않습니까? –

+0

하하 아니야 ... 내 변수를 더 신중하게 명명해야 해 .... – devs

+1

정말요? '$ (this) .children(). parent()'가'$ (this)'와 동일하다고 생각하지 않습니까? :) –

답변

5

이미 jQuery를 사용하고 있기 때문에 코드는 단순히

if (photosLen > 1) { 
     photos.each(function(i) { 
      $(this).css('zIndex', i); 
     }) 
     .parent() 
     .addClass('album'); 
    } 

참고가 될 수있는 each()과 camelCase z-index 속성의 구문

0

코드에서 i의 값을 늘리는 것을 잊지 마십시오 :

 while (i < photosLen) { 

      $(this).children().css({ 
       'z-index': i 
      }); 
      i++; 
     } 
관련 문제