JQueryを使用して、子サブメニューの前に順序付けられていないリスト項目にクラスを挿入する方法は？

Question

私はWordpress PHPメニュー機能を備えたマルチレベルのモバイルナビゲーションメニューで作業しています。サブメニューの後に表示されないで、親リスト項目にスパンボタン（サブメニューを開く）を挿入するのが難しいです。私は可能であれば、このように、ULクラスの前にそれを挿入できるようにしたいと思います

<li class=“menu-item menu-item-post_type menu-item-object-page menu-item-has-children menu-item-463”> ==$0 
    <a href=“http://www.mywebsite.co.uk/page/“>Page</a> 
    <ul class=“sub-menu”>…</ul> 
    <span class=“submenu-button”>+</span> 
</li> 

：

<li class=“menu-item menu-item-post_type menu-item-object-page menu-item-has-children menu-item-463”> ==$0 
    <a href=“http://www.mywebsite.co.uk/page/“>Page</a> 
    <span class=“submenu-button”>+</span> 
    <ul class=“sub-menu”>…</ul> 
</li> 

次のように検査要素のマークアップで表示されている瞬間

次のように私は現在、スパン/ボタンを追加するために使用してい

jQueryのは、次のとおりです。私が持っている

$('nav.main-menu#mobile ul li:not(.hide-mobile) ul').parent('li').append('<span class="submenu-button">+</span>'); 

appendの代わりにprependを使用しましたが、li aタグとul ulの前に移動しました。これは避けたいものです。

これを行うには良い方法がありますか？

Answer 1

使用jqueryのbefore

$('.sub-menu').before('<span class=“submenu-button”>+</span>'); 

OR insertBefore

$("<span class='submenu-button'>+</span>").insertBefore(".sub-menu"); 

Answer 2

あなたは、これはあなたがのinsertBefore http://api.jquery.com/を使用する必要が

$('.menu-item a').after('<span class="submenu-button">+</span>');