javascript - Wordpress：如何将跨度添加到菜单

Question

我有这样的menuin wordpress：-

<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>

当我使用这个菜单时会创建这个菜单：-

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

所以我需要当任何li人有孩子时，在<span></span>这样的标签之前添加标签

   <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>

我怎样才能做到这一点。通过 jQuery

Answer 1

使用.prepend()

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

现场演示

现场演示

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

Answer 2

如果您不愿意深入研究 wordpress 的功能，可以<span>使用正则表达式注入元素：

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

结果：

<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

因此，您只需preg_replace使用\1<span></span>\2（您需要在 中添加反斜杠</a>）

关于 php fiddle 的示例（假设我正确生成了链接，哈哈）

Answer 3

通过 jQuery？好的：

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

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