CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tomas
Tomas

Reputation: 151

jQuery prepend not for subelements

I'm trying to get work menu with dropdown options.

My task:

I need to add span element to level 1 menu items, with script below I unfortunately add the span element also to the dropdown options

Menu CODE structure:

<li class="menu-item-1"><a href="#">Item1</a>
<li class="menu-item-2"><a href="#">Item2</a>    
<li class="menu-item-3">
  <a href="#">Item3</a>
  <ul class="sub-menu dropdown">
    <li class="menu-item-4"><a href="#">Subitem1</a></li>
    <li class="menu-item-4"><a href="#">Subitem1</a></li>
  </ul>
</li>

my not proper jQuery solution

$('.menu-item-552 a:not(.dropdown)').prepend('<span class="span-1"></span>');
$('.menu-item-553 a:not(.dropdown)').prepend('<span class="span-2"></span>');
$('.menu-item-561 a:not(.dropdown)').prepend('<span class="span-3"></span>');
$('.menu-item-559 a:not(.dropdown)').prepend('<span class="span-4"></span>');

Upvotes: 0

Views: 64

Answers (2)

SW4
SW4

Reputation: 71170

You're using not to filter a elements for .dropdown despite the fact its actually a class applied to ul:

$('ul:not(.dropdown) .menu-item-552 a').prepend('<span class="span-1"></span>');

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388406

Target only the child element of the element with said class - use child selector instead of descendant selector

$('.menu-item-552 > a').prepend('<span class="span-1"></span>');

Upvotes: 2

Related Questions