Javascriptを/ jQueryのネストされた行の最初のアンカー子を選択

Question

私はこのコードを持っている：

<ul> 
    <li class="open-submenu"><a href="javascript:void(0)">HERE</a>    
    <ul class="submenu"> 
     <li><a href=#></a></li> 
     <li><a href=#></a></li> 
     <li><a href=#></a></li> 
    </ul> 
    </li> 
    <li class="open-submenu"><a href="javascript:void(0)">HERE</a>    
    <ul class="submenu"> 
     <li><a href=#></a></li> 
     <li><a href=#></a></li> 
     <li><a href=#></a></li> 
    </ul> 
    </li>    
</ul> 

私はちょうど次の「HERE」のテキストには、JavaScriptで、「+」文字を追加します。私はspan要素の中にそれを追加したい。

私は$('.open-submenu a:first').append("<span class='open-submenu-sym'>+</span>");を試しましたが、これは最初のopen-submenuにのみ影響します。

私も$('.open-submenu').append("<span class='open-submenu-sym'>+</span>");を試しましたが、これはすべてのアンカー、ネストされたアンカーにも影響します。

2つのopen-submenuのアンカーの内側にのみスパンを追加するにはどうすればよいですか？

Answer 1

あなたはこのようにそれをすることによって、クラス.open-submenu内部aをターゲットにすることができます。

https://jsfiddle.net/estvwpvz/6/

$('.open-submenu > a').append("<span class='open-submenu-sym'>+</span>"); 

Answer 2

あなたはクラスのサブメニューの直接の子であるaを探しています - .open-submenu > a：

$('.open-submenu > a').append("<span class='open-submenu-sym'>+</span>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="open-submenu"><a href="javascript:void(0)">HERE</a>    
 
    <ul class="submenu"> 
 
     <li><a href=#></a></li> 
 
     <li><a href=#></a></li> 
 
     <li><a href=#></a></li> 
 
    </ul> 
 
    </li> 
 
    <li class="open-submenu"><a href="javascript:void(0)">HERE</a>    
 
    <ul class="submenu"> 
 
     <li><a href=#></a></li> 
 
     <li><a href=#></a></li> 
 
     <li><a href=#></a></li> 
 
    </ul> 
 
    </li>    
 
</ul>