each()를 사용하여 jQuery + CSS 조작

Question

CSS 메뉴를 만들려고합니다. child ul 태그에있는 모든 li > a 요소에 대해 테두리 및 패딩을 제거하고 싶습니다. 여기

메뉴에 대한 코드입니다 (혼란 죄송합니다)

<ul id="nav"> 
       <li><a id="cat1" href="#">Menu 1</a></li> 
       <li><a id="cat2" href="#">Menu 2</a></li> 
       <li><a id="cat3" href="#">Menu 3</a> 
        <ul> 
         <li><a href="#">Sub Item 1 - M3</a></li> 
        </ul> 
       </li> 
       <li><a id="cat4" href="#">Menu 4</a> 
        <ul> 
         <li><a href="#">Sub Item 2 - M3</a></li> 
         <li><a href="#">Sub Item 3 - M3</a></li> 
         <li><a href="#">Sub Item 4 - M3</a></li> 
        </ul> 
       </li> 
      </ul> 

<li><a href="#">Sub Item 1 - M3</a></li> 
<li><a href="#">Sub Item 4 - M3</a></li> 

이를 시도하지만가 국경을 걸립니다 마지막 요소의 테두리와 패딩을 제거해야하는 코드 하위 항목 4

$("#nav li ul").each(function(index) { 
    $("#nav li ul > :last a").css('border','0 none'); 
    $("#nav li ul > :last a").css('padding','0'); 
}); 

Answer 1

.each으로 전화하지 않아도됩니다. 는 대신 다음과 같은 선택 사용할 수 있습니다

$("#nav li ul > li:last-child a").css({ border: 0, padding: 0 }); 

Answer 2

$("#nav li ul").each(function() { 
    $("li:last a", this) 
     .css('border', '0 none') 
     .css('padding','0'); 
});