When using Twitter Bootstrap, can I program the span class caret to be inserted automatically if if nested lists are detected within menu?

Question

I am using the Squiz Matrix CMS system and integrating the Twitter Bootstrap into a page design. To make drop down menus I have notice that you need to place a <span class="caret"></span> inline within the anchor tag so that it shows a drop down arrow.

Problem is the system I am using automatically generates the menus based on the pages within a site so I can't manually insert the span tag.

I was wondering if there was a way to scan over the HTML content that is rendered onto a page within browser and check whether an unordered list has another unordered list nested within in it - then insert the span tag into the HTML if the condition is met.

I was thinking of using a jQuery function just before the closing body tag so the page HTML would render first before the script runs.

Sound like a possible thing to do with jQuery?

UPDATE: Put some jQuery code together to give it a test and it won't play ball with me.

Here is the HTML code:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="http://testing.slq.qld.gov.au/qanzac100/about">About</a>

            <!-- start sub level list -->
            <ul class="dropdown-menu" role="menu">
                <li><a href="http://testing.slq.qld.gov.au/qanzac100/about/world-war-1-donations">World War 1 Donations</a></li>
                <li><a href="http://testing.slq.qld.gov.au/qanzac100/about/qanzac100">#qanzac100</a></li>
                <li><a href="http://testing.slq.qld.gov.au/qanzac100/about/onthisday">#onthisday</a></li>
            </ul>
            <!-- End sub level list -->
        </li>
    </ul>
</div>

For some weird reason the code editor won't let me insert the closing div.

Ok here is the jQuery code that sits at the bottom before closing the body tag:

<script type="text/javascript">
$('.navbar-nav > ul li').each(function(){    
    if($(this).has('ul')){
        $('.navbar-nav > ul li > a.dropdown-toggle').prepend('<span class="caret"></span>');
        alert("there is a child list");
    }    
});
</script>

Is there something that I am doing wrong here?

score 1 · Answer 1 · answered Feb 13 '15 at 03:13

1

i help to help you, you can use find() and search the tags(div > ul > li) and then you add prepend(). Another idea would be alone with jQuery for example $("div > ul > li..").In both cases i do not think it works with classes, do not use each() and has()

answered Feb 13 '15 at 03:13

step

186
7

So to clarify, you are saying that I should use find () and search () instead of each () and has () ? – Ryan Coolwebs Feb 15 '15 at 06:43
You can use $("tag html").find("div.class > ul > li").addClass("class") Or $("div.class > ul > li").prepend("
space
") – step Feb 16 '15 at 22:33

score 0 · Answer 2 · edited May 23 '17 at 11:56

I ended up solving it with CSS thanks to this other stackoverflow question Is there a CSS way to add an arrow if a ul has a ul child?

Here is the JS Fiddle setup for it http://jsfiddle.net/w9xnv/457/.

.navbar-nav li > a:after { margin-left: 5px; content: '>'; }
.navbar-nav > li > a:after { margin-left: 5px; content: '\25BC'; color:#333; }
.navbar-nav li > a:only-child:after { margin-left: 0; content: ''; }

Much preferable to do it with CSS rather than Javascript for obvious reasons.

When using Twitter Bootstrap, can I program the span class caret to be inserted automatically if if nested lists are detected within menu?

2 Answers2