Question

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

Answer 1

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