Seppia Anthony Seppia Anthony - 1 month ago 7
Javascript Question

Javascript/jQuery select the first anchor child in nested rows

I have this code:

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


I want to append, in javascript, a "+" char just next to the "HERE" text. I want also to add it inside a span element.

I tried
$('.open-submenu a:first').append("<span class='open-submenu-sym'>+</span>");
but this affect only the first
open-submenu
;

I tried also
$('.open-submenu').append("<span class='open-submenu-sym'>+</span>");
but this will affect ALL the anchors, even the nested anchors.

How can I append the span only inside the two
open-submenu
's anchors?

Answer

You could just target the a inside the class `.open-submenu' by doing it like this.

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

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