CODEWITHSUNDEEP
jquerylistloopsaddition
Alex Cowley
Alex Cowley

Reputation: 37

Loop through list elements, and add class if list element contains another list

Pretty simple problem here, but it's been bugging me a bit.

I've got an accordion menu set up like so:

<ul id="menu" class="navigation">
    <li><a href="#"><span>Dashboard</span></a>
        <ul>
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Articles &amp; Posts</a></li>
            <li><a href="#">Pages</a></li>
        </ul>
    </li>
    <li><a href="#"><span class="icon_articles">Articles &amp; Posts</span></a>
        <ul>
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Articles &amp; Posts</a></li>
            <li><a href="#">Pages</a></li>
        </ul>
    </li>
    <li><a href="#"><span class="icon_pages">Pages</span></a></li>
    <li><a href="#"><span class="icon_media">Media Gallery</span></a>
        <ul>
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Articles &amp; Posts</a></li>
            <li><a href="#">Pages</a></li>
        </ul>
    </li>
    <li><a href="#"><span class="icon_calendar">Calendar</span></a></li>
    <li><a href="#"><span class="icon_demos">Features &amp; Demos</span></a>
        <ul>
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Articles &amp; Posts</a></li>
            <li><a href="#">Pages</a></li>
        </ul>
    </li>
    <li><a href="#"><span class="icon_settings">Settings</span></a></li>
    <li><a href="#"><span class="icon_logout">Logout</span></a></li>
</ul>

And I've got a jQuery script that runs the accordion:

function accordionMenu() {
$('ul.navigation ul').hide();
$('ul.navigation li a').click(
    function() {
        var parentElement = this.parentNode.parentNode.id;
        var elementTest = $(this).next();

        if((elementTest.is('ul')) && (elementTest.is(':visible'))) {
            $('#' + parentElement + ' ul:visible').slideUp('fast');
            $(this).removeClass('active');
            return false;
        }
        if((elementTest.is('ul')) && (!elementTest.is(':visible'))) {
            $('#' + parentElement + ' ul:visible').slideUp('fast');
            elementTest.slideDown('fast');
            $('ul.navigation a').removeClass('active');
            $(this).addClass('active');
            return false;
        }
    }
);
}

$(document).ready(function() {accordionMenu();});

Now I need to figure out how to loop through the list items, and find the ones that have lists following them (ie, the ones that when clicked, drop down to reveal the hidden list.). Then I need to add a span on the end of each one (inbetween </a> and <ul>). That's it really. It's just confusing me - how should I go about doing it?

Thanks,

Alex

Upvotes: 2

Views: 4014

Answers (4)

NakedLuchador
NakedLuchador

Reputation: 991

$('ul.navigation').children().has("ul").each(function(){
    $(this).children("a").append("<span>test</span>");              
});

this should work :) good luck with your project.

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

You can try this.

$('ul.navigation li').filter(function(){
    return $(this).children('ul').length > 0;
}).each(function(){
    $(this).find('a').after('<spam />');
})
.addClass('className');

Upvotes: 1

Kevin B
Kevin B

Reputation: 95047

The :has selector is perfect for this scenario.

$("#menu li:has(ul)").addClass("hasSubMenu");

Upvotes: 1

bububaba
bububaba

Reputation: 2870

$("#menu ul").each(function(){
    $(this).closest("li").addClass("whatever_class_you_need")
        .find("a").first().after("<span>something goes here</span>");
});

Upvotes: 1

Related Questions