Question

I have a problem. Please see the part of my code:

<ul>
  <li><a href="#">Test 1</a></li>
  <li><a href="#">Test 2</a>
    <ul>
      <li><a href="#">Test 3</a></li>
      <li><a href="#">Test 4</a></li>
    </ul>  
  </li>
  <li><a href="#">Test 5</a></li>
  <li><a href="#">Test 6</a></li>
  <li><a href="#">Test 7</a></li>  
  <li><a href="#">Test 8</a>
    <ul>
      <li><a href="#">Test 9</a></li>
      <li><a href="#">Test 10</a></li>
      <li><a href="#">Test 11</a></li>
      <li><a href="#">Test 12</a></li>  
    </ul>  
  </li>  
</ul>

I want to add classes to all items which don’t include more ul elements – please see what I want to achieve:

<ul>
  <li><a href="#" class="link">Test 1</a></li>
  <li><a href="#">Test 2</a>
    <ul>
      <li><a href="#" class="link">Test 3</a></li>
      <li><a href="#" class="link">Test 4</a></li>
    </ul>  
  </li>
  <li><a href="#" class="link">Test 5</a></li>
  <li><a href="#" class="link">Test 6</a></li>
  <li><a href="#" class="link">Test 7</a></li>  
  <li><a href="#">Test 8</a>
    <ul>
      <li><a href="#" class="link">Test 9</a></li>
      <li><a href="#" class="link">Test 10</a></li>
      <li><a href="#" class="link">Test 11</a></li>
      <li><a href="#" class="link">Test 12</a></li>  
    </ul>  
  </li>  
</ul>

I want to use jquery. Many thanks for any clues.

Answer 1

You can use .not() with the :has() selector.

$("li").not("li:has(ul)")
       .children("a")
       .addClass("link");

http://jsfiddle.net/j4zsq/

---

Or given that the a elements to be targeted seem always to be an only child, you can use the only-child selector.

$("li > a:only-child").addClass("link");

http://jsfiddle.net/j4zsq/1/