Question

I’m trying to restrict the append function so that it only applies to the top level LIs, but I obviously have no idea how to be that selective. I’ve searched for the last few days hoping to find something that will lead me in the right direction, but no luck so far…

I only want the down arrow to be used in the top level, and the right arrow to be used on subsequent LIs. Hopefully this will make sense. Here’s the code that I’m using.

$("ul.dropdown li:has(ul)").find("a:first").append('<img class="down_arrow" border="0" style="padding-left:3px;" src="http://nunyabiz.zxq.net/img/down.gif" />')
$("ul.dropdown li ul li:has(ul)").find("a:first").append('<img class="right_arrow" border="0" style="padding-left:3px;" src="http://nunyabiz.zxq.net/img/right.gif" />');

To see the full code: http://nunyabiz.zxq.net/menu/index.html

Answer 1

using the Child Selector (“parent > child”) selector

$("ul.dropdown > li:has(ul)").find("a:first").append(
    $("<img>", { 
        "class": "down_arrow", 
        border: 0, 
        style: "padding-left:3px;", 
        src: "http://nunyabiz.zxq.net/img/down.gif"
    })
);

or how you had it:

$("ul.dropdown > li:has(ul)")
    .find("a:first")
    .append('<img class="down_arrow" border="0" style="padding-left:3px;" src="http://nunyabiz.zxq.net/img/down.gif" />')

which is just OK