JQuery와 여러 요소) (마지막

Question

나는이 지금은 sub_menu, 내부 border bottom 각 li을 준이

<ul class = "main_nav"> 
    <li> 
     <ul class = "sub_menu"> 
      <li>hello</li> 
      <li>world</li> 
      <li>English</li> 
     </ul> 
    </li> 
    <li> 
     <ul class = "sub_menu"> 
      <li>hello</li> 
      <li>world</li> 
      <li>English</li> 
     </ul> 
    </li> 
    <li> 
     <ul class = "sub_menu"> 
      <li>hello</li> 
      <li>world</li> 
      <li>English</li> 
     </ul> 
    </li> 
</ul> 

같은 마크 업하지만 내가 지난 테두리의 바닥을보고 싶지 않는 모든 LIS오고있다 이 같은 하나의 내가 사용한 JQuery와 스크립트 :

$('.sub_menu > li').last().css('border', '0'); 

하지만 그것은 단지 마지막에 효과적이다.
나는 각 섹션이

Answer 1

$('.sub_menu').each(function() { 
    $(this).find('li:last').css('border','0'); 
}); 

의 마지막 li 테두리 하단을 제거하는 방법. :)

Answer 2

이 시도 :

$('.sub_menu').each(function() { 
    $(this).find('li').last().css('border', '0'); 
}); 

Demo

Answer 3

$('.sub_menu > li:last-child').css('border', '0'); 

:last-child 의사 요소는 각각의 상위 - 하위 그룹 내에서 마지막 요소를 선택하고, 오히려 모든 요소의 마지막보다 일치.

Answer 4

.each() 기능을 사용하지 않는 이유는 무엇입니까? CSS에서,

$(".sub_menu > li:last-child ").css('border', '0'); 

또한 :

$(".sub_menu").each(function() { 
    $(this).children("li").last().css('border', '0'); 
}); 

당신은 실제로 같은 사용하여 다른 방식으로 작업을 수행 할 수 있습니다

.sub_menu > li:last-child {border: 0;} 

참고 : CSS 방법은 IE 8에서 작동하지 않습니다 아래.

Answer 5

바로 사용 JQuery와 필요 없음 : 마지막 요소에 경계를 해제하기 위해 CSS에 마지막 아이 선택기를

.sub_menu > li { 
    border-bottom: solid black 1px; 
} 

.sub_menu > li:last-child { 
    border: none; 
} 

편집 : 프라 빈은 주석으로, :last-child는 IE8에서 지원되지 않는 경우에만 :first-child

그래서 당신은 언제나 각 하위 메뉴의 마지막 항목에 .last 클래스를 추가 할 수와와 위의 한 대신이 CSS 규칙을 사용 : 마지막으로 아이의 의사 선택

<li class='last'>English</li> 

.sub_menu > li.last { 
    border: none; 
}