jquery - Find in specified and append to jQuery

Question

This is my setup:

<div id="nav">
  <ul>
    <li><a href="#">MENU ENTRY</a></li>
    <li><a href="#">MENU ENTRY WITH SUBMENU</a>
      <ul>
        <li><a href="#">SUBMENU ENTRY</a></li>
        <li><a href="#">SUBMENU ENTTY</a></li>
      </ul>
    </li>
  </ul>
</div>

Now I tried to achieve the following with jQuery:

1. Check if "#nav li" has another "ul"
2. If so, find the "a"-Tag and append a "span"-Tag to it

Like this:

$("#nav li").has("ul").find("a").append('<span class="test">SOMETHING</span>');

Unfortunately the "span"-Tag is appended to all children "a"-Tags.

I tried to remove the class from the other "a"-Tags, but it does not work.

 $("#nav li ul li").find("a").remove(".test");

And here's the fiddle: http://jsfiddle.net/LmDYg/6/

Help would be appreciated, thanks!

Answer 1

これはあなたのために働くはずです

$('#nav li ul').prev('a').append('<span class="test">SOMETHING</span>');

更新されたフィドル

または、children()の代わりに使用して、のfind()直系の子孫のみを選択できます<li>

Answer 2

あなたが言っているのaは、 の直接の子である にのみ追加したいということだと思います。その場合、 の代わりにli使用します。childrenfind

$("#nav li").has("ul").children("a").append('<span class="test">SOMETHING</span>');

http://jsfiddle.net/LmDYg/8/

Answer 3

$('#nav li>ul').parent().children('a').append('<span class="test">SOMETHING</span>');