Question

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-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 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

Answer 1

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.