CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
kamkam
kamkam

Reputation: 1

Wordpress : How can add span to menu

i have menuin wordpress like this :-

<div id="my_custom_class">
 <ul class="my_custom_class">
   <li class="page_item"><a href="#">page_item</a>
 <ul class='children'>
    <li class="page_item child"><a href="#">children</a></li>
 </ul>
   </li>
   <li class="current_page_item"><a href="#">current_page</a></li>
   <li class="current_page_item"><a href="#">current_page</a></li>
   <li class="current_page_item"><a href="#">current_page</a></li>
 </ul>
</div>

this menu will be create wheni use this :-

<? wp_nav_menu('menu=header'); ?>

so i need when any li have child, add <span></span> tag befor tag like this 

   <div id="my_custom_class">
     <ul class="my_custom_class">
       <li class="page_item"><span></span><a href="#">page_item</a>
     <ul class='sub-menu'>
        <li class="page_item child"><a href="#">children</a></li>
     </ul>
       </li>
       <li class="current_page_item"><a href="#">current_page</a></li>
       <li class="current_page_item"><a href="#">current_page</a></li>
       <li class="current_page_item"><a href="#">current_page</a></li>
     </ul>

</div>

how can i do that. by jquery

Upvotes: 0

Views: 645

Answers (3)

Radley Sustaire
Radley Sustaire

Reputation: 3399

If you aren't willing to dig in to wordpress' functionality, you can inject the <span> elements with regex:

(<li.*class="[^\"]*page_item[^\"]*"[^>]*>)(<a.*</a>[^<]+<ul)

Result:

<div id="my_custom_class">
<ul class="my_custom_class">
<li class="page_item"><span></span><a href="#">page_item</a>
<ul class='children'>
<li class="page_item child"><a href="#">children</a></li>
</ul>
</li>
<li class="current_page_item"><a href="#">current_page</a></li>
<li class="current_page_item"><a href="#">current_page</a></li>
<li class="current_page_item"><a href="#">current_page</a></li>
</ul>
</div>

$1 = <li class="page_item">

$2 = <a href="#">page_item</a><ul

And so you just preg_replace with \1<span></span>\2 (you will need to add a backslash to the </a>)

Example on php fiddle (assuming I generated the link correctly lol)

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Use .prepend()

$('ul.my_custom_class li a').closest('li').prepend('<span></span>');

Live DEMO

Live DEMO

$('ul.my_custom_class li:has(ul)').prepend('<span></span>');

Upvotes: 1

frnhr
frnhr

Reputation: 12903

By jQuery? Ok:

$('<span></span>').prependTo('ul.my_custom_class li:has(ul)');

See http://api.jquery.com/prependTo/

Upvotes: 0

Related Questions