jquery - list parent/child -
i jquery novice. enjoy using jquery , attempting better @ it.
i have following list menu:
page home: no child
<ul class="menu"> <li>team 1 photos</li> <li>team 2 photos</li> <li>group activities</li> </ul> sub-page has child
<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> my css is:
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; } i trying achieve; last <li> have border-bottom if there no child. last <li> have no border if there child
i hope making sense
i have tried way either directly apply border yes/no or add class can apply style:
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'); an stuck please steer me in right direction can learn how achieve this.
thank you
lrl
you simplify css.
ul.menu, ul.children { width: auto; margin-left: 0; } ul.menu li{ border-bottom:1px solid #999; margin-bottom: 10px; padding-bottom: 3px; } you don't need seperate styles .children because descendent selector on .menu take care of <li> in markup. <li> within .menu have border. remove border last child <li> of .menu if has sub-menu, use following code.
$('ul.menu > li:last-child').has('ul').css('border-bottom','none'); please note have used child selector in jquery instead of descendent selector.
Comments
Post a Comment