list parent/child

I am a jQuery novice. I enjoy using jQuery and am attempting to get better at it.

I have the following list as a 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-开发者_如何学JAVAbottom: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 am trying to achieve; the last <li> to have border-bottom if there is no child. the last <li> to have no border if there is a child

I hope I am making sense

I have tried way to either directly apply the border yes/no or add a class so I can apply the 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 now I am stuck so please steer me in the right direction so I can learn how to achieve this.

Thank you

LRL

You could simplify your 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 for .children because the descendent selector on .menu will take care of all the <li> in your markup. All <li> within .menu will now have a border. To remove border from the last child <li> of .menu if it has a sub-menu, you could use the following code.

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

Please note that I have used a child selector in jquery instead of a descendent selector.

here you have one solution:

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;
    }*/

And, have the following jquery:

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

We are removing the border only if the li has a child.

Hope this helps. Cheers Hope this helps, cheers.

After a little more testing based on the help from Edgar and Amrit I settled on this

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

Edgar I could not get your solution to work, probably something I did. Amit strangly when I first tested your solution it worked however, when I changed the page names it stopped functioning.

I appreciate the time you have given in helping me find a solution

Cheers LRL