Code Snippet

Home » Code Snippets » jQuery » Select List Item Only If Doesn’t Contain Another List (and is top level)

Select List Item Only If Doesn’t Contain Another List (and is top level)

I realize this is rather specific, but I had to write this selector earlier to fix a problem and I used jQuery because the selector is rather advanced (and needed to work cross-browser). I needed to select the anchor link of a list item but only if that list item didn't contain another list and was at the top level of the nested list structure (no deeper).

$("ul.dropdown > li:not(:has('ul')) a").css({
        "background-image": "none",
});

The idea was that each of the top level links in the dropdown menu had a "down arrow" graphic, but the list items that did not have a dropdown should have that arrow removed.

Subscribe to The Thread

  1. Ignacio Ricci

    Nice one.

    Why don’t you use .addClass instead. It’s nicer and more flexible.

    Reply ↓
  2. Kelly A.

    @Ignacio .addClass is a nice way to hide things, like adding a .hiddenArrow class to each list item would hide the items.

    However, and you all can correct me if I’m wrong here, it’s more taxing to find all of them and add a class then it would be to just correct that particular instance in the css.

    Maybe these two are basically the same, either way?

    But .css, in my opinion, is way more flexible than .addClass, since you can write the css rule on the fly.

    Reply ↓
    • Ignacio Ricci

      If later you need to remove a border, and not a background, or add a color, or whatever, you don’t need to edit the js by using addClass

  3. Justin Ryan

    Was there a reason you didn’t use the reverse?

    ul.dropdown > li:has('ul') a = background-image

    Reply ↓
  4. luke burford

    Still getting to grips with jQuery, and was only yesterday wondering if something like this would work for a dropdown menu on a new project.

    Cross browser too, lovely stuff :)

    Reply ↓
  5. Bogdan Pop

    Wouldn’t have it been easier to add a css class to the link items that contain another list?

    We tend to use Javascript nowadays to fix pretty much everything, when we have options to fix them using the rightful language, which in this case is css.

    Reply ↓
  6. jitendra vyas

    How to solve my this problem http://stackoverflow.com/questions/2004328/how-to-give-style-to-list-item-only-if-item-has-another-list-inside-otherwise-sty

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~