부모/자식 목록

저는 jQuery 초보자입니다. jQuery를 사용하는 것을 즐긴다. 부모/자식 목록

I 메뉴로 다음과 같은 목록이 있습니다

페이지를 집 :

<ul class="menu"> 
<li>Team 1 Photos</li> 
<li>Team 2 Photos</li> 
<li>Group Activities</li> 
</ul>

하위 페이지가 아이

<ul class="menu"> 
<li>Team 1 Photos</li> 
<li>Team 2 Photos</li> 
<li>Group Activities 
    <ul class="children"> 
    <li>Team 1 News</li> 
    <li>Team 2 News</li> 
</ul> 
</li> 
</ul>

에게이 자식

내 CSS는 다음과 같습니다

ul.children { 
    width: auto; 
    margin-left: 0; 
} 
ul.children li{ 
    border-bottom:1px solid #999; 
    margin-bottom: 10px; 
    padding-bottom: 3px; 
} 
ul.children li:last-child{ 
    border-bottom:1px solid #999 !important; 
} 
ul.menu { 
    width: auto; 
    margin-left: 0; 
} 
ul.menu li{ 
    border-bottom:1px solid #999; 
    margin-bottom: 10px; 
    padding-bottom: 3px; 
} 
ul.menu li:last-child{ 
    border-bottom:none; 
}

나는 달성하려고 노력하고있다. 마지막으로 <li>은 자식이 없으면 border-bottom을 갖습니다. 아이

내가 직접 예/아니오 국경을 적용하거나 내가 스타일을 적용 할 수있는 클래스를 추가하는 것이

내가 시도 방법을 만드는 중이라서 희망을가있는 경우 마지막 <li> 에는 국경이 없습니다 :

jQuery('#menu ul li:has(ul)').parent('li').prev()).css('border','1px solid #000');

if (jQuery('.menu li:has(ul)')) { 
    ('ul.menu li:last-child').add Class('borderme');

jQuery('.menu li:has(ul)').append('borderyes');

이제 저는 올바른 방향으로 나를 조종하십시오. 그래서 이것을 달성하는 방법을 배울 수 있습니다.

감사합니다

LRL 여기 당신이

출처

2011-07-02 Laurence

당신의 CSS를 단순화 할 수 있습니다. .menu에서 하위 선택이 마크 업의 모든 <li> 돌봐 때문에

ul.menu, ul.children { 
     width: auto; 
     margin-left: 0; 
    } 
ul.menu li{ 
     border-bottom:1px solid #999; 
     margin-bottom: 10px; 
     padding-bottom: 3px; 
    }

당신은 .children에 대한 별도의 스타일을 필요가 없습니다. 모든 <li> 안에 .menu은 이제 테두리가 있습니다. 마지막 자식 <li>에서 테두리를 제거하려면 하위 메뉴가있는 .menu이면 다음 코드를 사용할 수 있습니다.

$('ul.menu > li:last-child').has('ul').css('border-bottom','none');

자손 선택기 대신 jquery에서 자식 선택기를 사용했습니다.

출처

2011-07-02 07:47:25 Amrit

하나의 솔루션 :

$(document).ready(function(){ 
    $("ul.menu li:last-child:has(ul)").css("border-bottom", "none"); 
});

우리는 단지 경우 국경을 제거 :

ul.children { 
     width: auto; 
     margin-left: 0; 
    } 
    ul.children li{ 
     border-bottom:1px solid #999; 
     margin-bottom: 10px; 
     padding-bottom: 3px; 
    } 
    /* Remove this css rule 
    ul.children li:last-child{ 
     border-bottom:1px solid #999 !important; 
    } 
    */ 
    ul.menu { 
     width: auto; 
     margin-left: 0; 
    } 
    ul.menu li{ 
     border-bottom:1px solid #999; 
     margin-bottom: 10px; 
     padding-bottom: 3px; 
    } 
    /* Remove this css rule 
    ul.menu li:last-child{ 
     border-bottom:none; 
    }*/

그리고, 다음과 같은 jQuery를이 li 아이가 있습니다.

희망이 도움이됩니다. 환호 호프가 도움이 되었으면 좋겠어요.

출처

2011-07-02 06:53:52

는 에드가와하기 Amrit의 도움을 기반으로 좀 더 테스트 후 내가 솔루션 작동시킬 수없는이

jQuery('.menu li').has('ul').css({'border' : 'none','margin-bottom' : '0'});

에드가에 내가 한 아마 뭔가를 정착했다. 처음에는 솔루션을 테스트했을 때 이상하게도 아파치가 작동했지만 페이지 이름을 변경하면 작동이 멈췄습니다.

난 당신이 나에게 솔루션을

건배를 찾을 수 있도록 주어진 한 시간을 주셔서 감사합니다 LRL

출처

2011-07-03 05:15:49 Laurence

부모/자식 목록

답변

관련 문제