조건문이 결과에 응답하지 않습니다.

Question

내 페이지에 최대 3 개의 LI가 각각 채워져있을 수 있습니다. 얼마나 많은 LI가있을 수 있는지에 따라 왼쪽 마진을 처리하기 위해이 조건문을 설정했습니다. 그것은 정확한 결과를 기록하지만 결과가 2 또는 3 인 경우에도 항상 결과가 1 인 것처럼 CSS를 적용합니다 ... 저는이 점에서 매우 익숙하기 때문에 좀 더 경험이 많은 사람에게 분명하지 않습니다. . 각 LI의 너비와 높이는 40px이며 배경 이미지는 1입니다. 텍스트가 들여 쓰기되어 표시되지 않습니다.

$("ul.links").each(function(){  
    var num = $(this).children().length; 
    if (num == 1) { 
     $('ul.links li:first-child').css('margin-left','125px'); 
    } 
    else if (num == 2) { 
     $('ul.links li:first-child').css('margin-left','96px'); 
    } 
    else { 
     $('ul.links li:first-child').css('margin-left','71px'); 
    } 
    //console.log(num); 
}); 

<ul class="links"> 
    <li><a href="#">First</a></li> 
    <li><a href="#">Second</a></li> 
    <li><a href="#">Third</a></li> 
</ul> 

Answer 1

귀하의 문제가 여기에 있습니다 : 당신은 다시 ALL을 ul.links을 선택하고 그들 모두 (또는 오히려 자신의 첫 아이)에 여백을 적용

$('ul.links li:first-child').css('margin-left','71px'); 

. this을 사용하여 반복하는 대상에만 적용해야합니다.

$("ul.links").each(function(){  
    var num = $(this).children().length; 
    if (num == 1) { 
     $(this).children().first().css('margin-left','125px'); 
    } 
    else if (num == 2) { 
     $(this).children().first().css('margin-left','96px'); 
    } 
    else { 
     $(this).children().first().css('margin-left','71px'); 
    } 
    console.log(num); 
}); 

가 fiddle here를 참조하십시오

이 (의도 웃기)을 시도하지 않습니다.

epascarello가 지적했듯이 효율을 위해 jQuery 객체를 두 번 다시 생성하지 않고 캐시해야합니다.

var $elem = $(this); 

을 그리고 당신은 $(this)이 whereever 다음, 당신은 $elem로 교체 할 수 있습니다 : 그래서 추가 할 수 있습니다. 이렇게하는 이유는 $(something)을 사용할 때마다 약간의 오버 헤드가있는 새 jQuery 객체를 생성하기 때문입니다. $(this)은 매우 작지만 복잡한 선택기를 사용하는 경우 오버 헤드가 중요 할 수 있습니다.

또한 epascarello가 수행 한 것처럼 여백에 대한 변수를 만든 다음 조건부 블록의 끝에 적용하여 소스 코드에 몇 바이트를 저장할 수 있습니다. 또한, 예를 들어 선택기를 변경하기로 결정한 경우 (아마 첫 번째 자식 대신 두 번째 자식에 적용하기로 결정했을 수도 있음) 또는 바이올린을 적용 할 속성을 변경하면이 작업이 조금 더 쉬워집니다.

Answer 2

현재 코드가 아닌 모든 코드를 처리하므로 코드가 작동하지 않습니다. 아래는 현재 URL과 각각의 작업을 한 방법으로 복사하고 동일한 줄을 여러 번 붙여 넣지 않고 수행하는 한 가지 방법입니다. 똑같은 라인 복사를하고 3 번 붙여 넣는 이유는 나중에 변경할 필요가 있다는 것을 의미합니다. 하나가 아닌 3 곳에서 업데이트해야합니다.

$("ul.links").each(function(){ 
    var currentUL = $(this), 
     num = currentUL.children().length, 
     margin; //use a variable instead of pasting the same jq line over and over 
    switch(num){ //switch is cleaner 
     case 1 : 
      margin=125; 
      break; 
     case 2 : 
      margin=96; 
      break; 
     default : 
      margin=71; 
      break; 
    } 
    currentUL //Work off the current ul 
     .find(">li:first-child") //select the first li 
      .css("margin-left",margin + "px"); 
});