How do I add <span> tags as a child of only <li>'s with a specific class (pls see example)

<ul>
  <li>
    <a class="selected" href="#">One</a>
  </li>
  <li>
    <a href="#">Two</a>
  </li>
  <li>
    <a href="#">Three</a>
  </li>
</ul>

I am trying to use jQuery to find the li a with the class of selected, and add a span as a child of the li. So it ends up looking like this:

<ul>
  <li>
    <a class="selected" href="#">One</a>
    <span class="arrow"></span>
  </li>
  <li>
    <a href="#">Two</a>
  </li>
  <li>
    <a href="#">Three</a&开发者_运维问答gt;
  </li>
</ul>

I think I have to use .find but I am not sure how to put it together. If anyone can give me a hand, I'd really appreciate it. Thank you.

jQuery("a.selected").parent().append("<span class="arrow"></span>")

Broken down it becomes:

jQuery("a.selected"): All the <a> tags that have the "selected" class.
.parent(): Find its parent element.
.append("<span class="arrow"></span>"): Add the span on the end.

I would also suggest you check the jquery documentation

try

$("li.selected").append($("<span/>",{class:'arrow'}));

or you can use after

$("li.selected").after($("<span/>",{class:'arrow'}));

here is the fiddle http://jsfiddle.net/HsjPS/1/

I think the following will do what you need:

$("a.selected").parent().append("<span class='arrow'>")