Umrete Kurvi Umrete Kurvi - 14 days ago 5
jQuery Question

How to target all first childs on menus

I simply want to target all first Li elements in my

.sub-menu
class and apply span element (caret).I achieved it,but not what i wanted,the caret class appeared on all li elements from sub-menu,i tried alot combinations of scripts and nothing works.If i use
.first()
it appear only on li elements in sub menus that have other than one childrens.So if you have 1 li element to drop,it won't appear on it.. Sorry for that brainstorm i hope you understand me.This is how mu menu looks like right now.With this code:



$('.menu-new ul li:has(sub-menu)')
$('ul.sub-menu').parent('li').append('<span class=pc-caret></span');

<div class="menu-new">
<nav class="menu" role="navigation">
<ul class="menu ul">
<span class="pc-caret"></span>
<?php wp_nav_menu(array (
'theme_location'=> 'new-menu',
'container' => '',
'items_wrap' => '%3$s'
)); ?>
</ul>
</nav>
</div>




Answer

Try this ...

/*
$('ul.sub-menu').each(function(i, elmt){
  $('li:eq(0)', elmt).append('<span class="pc-caret">span</span>');
});
*/

//$('ul.sub-menu').eq(0).prepend('<span class="pc-caret">span</span>');

$('ul.sub-menu').each(function(i, elmt){
  $(elmt).prepend('<span class="pc-caret">span</span>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
<ul class="sub-menu">
  <li>item 11</li>
  <li>item 21</li>
  <li>item 31</li>
</ul>
<ul class="sub-menu">
  <li>item 12</li>
</ul>

Comments