Javascript - 다른 클래스 요소의 속성을 사용하는 클래스 요소

Question

다음은 코드 단편입니다. 클래스 속성 여백 - 바닥 창 및 위치 크기를 기준으로 영향을 시도합니다. 높이, 너비 등의 모든 인스턴스에서 작동하도록했습니다.하지만 여백 - 아래쪽으로 모든 클래스는 내 javascript 함수 중 마지막으로 오는 크기를 사용합니다. 그게 합당한 지 모르겠다. 아래 코드 :

//Javascript 
var thisMB = null; 
$("#Full").find(".t16").each(function() { 
       thisMB = '1.25em'; 
      }); 
      $("#Full").find(".t8").each(function() { 
       thisMB = '4.4175em'; 
      }); 

$(this).css("margin-bottom", thisMB); 

<!--html--> 
      <div>  
        <ul class="tlist"> 
         <li class="theTeams t16">1 1upLeft upLeft upLeft </li> 
         <li class="theTeams t16">1 1upLeft upLeft upLeft </li> 
         <li class="theTeams t16">3 1 upLeft upLeft upLeft </li> 
         <li class="theTeams t16">4 1 upLeft upLeft upLeft </li> 
         <li class="theTeams t16">5 1 upLeft upLeft upLeft </li> 
         <li class="theTeams t16">6 1 upLeft upLeft upLeft </li> 
        </ul> 
       </div> 
       <div> 
        <ul class="tlist"> 
         <li class="theTeams t8">1 upLeft upLeft upLeft </li> 
         <li class="theTeams t8">3 upLeft upLeft upLeft </li> 
         <li class="theTeams t8">5 upLeft upLeft upLeft </li> 
        </ul> 
       </div> 

는 기본적으로 내 LI는 후자의 자바 스크립트 함수가 아닌 하나 그들이 발견되는 특정 클래스 인스턴스에 걸립니다. 따라서 .t16은 마진이 14 이하이어야하고 .t8은 42 여야합니다 ... 둘 다 42입니다. 주문을 이동하면 둘 다 14가됩니다.

아이디어가 있습니까?

Answer 1

var thisMB = null; 
$("#Full").find(".t16").each(function() { 
    thisMB = '1.25em'; <--- this assigns the same variable over and over again 
}); 
$("#Full").find(".t8").each(function() { 
     thisMB = '4.4175em'; <--- so does this 
}); 

$(this).css("margin-bottom", thisMB); <--- this sets the element to thisMB = the final value. 

변수를 반복해서 지정하지만 루프 외부의 "this"에 반복 할당합니다. 선택한 요소 (this)의 값을 설정하려면 each(). 루프 내부에 있어야합니다.

Answer 2

다른 값을 설정할 때마다 변수를 두 번 설정합니다. 기본적으로이 작업을하고있는 '4.4175em'

var thisMB = null; 
thisMB = '1.25em'; 
thisMB = '4.4175em'; 

당신은 당신이 마지막 값 세트를 얻을 thisMB의 값을 확인합니다.

나는 이것이 당신이 원하는 생각 :

$("#Full .t16").each(function() { 
    $(this).css('margin-bottom', '1.25em'); 
}); 

$("#Full .t8").each(function() { 
    $(this).css('margin-bottom', '4.4175em'); 
}); 

UPDATE

약간 짧은 : 답장을

$("#Full .t16").css('margin-bottom', '1.25em'); 
$("#Full .t8").css('margin-bottom', '4.4175em');