How to select an element with a particular attribute

How to select an element with a particular attribute

Hi, all

I have a standard menu structured with an unordered list. Some of the items in the menu have sub items, but are not themselves links. Here's an example:
  1. <ul id="mainMenu">
  2.     <li><a href="">home</a></li>
  3.     <li><a>services</a>
  4.         <ul>
  5.             <li><a href="">services 1</a></li>
  6.             <li><a href="">services 2</a></li>
  7.         </ul></li>
  8. ...
As is, if you mouse over one of the list items that do not have a link, the cursor changes to a text cursor when over the text and becomes a pointer (arrow, not hand) when not on the text, but still within that <li> tag (due to the padding).

I want to change that so that when mousing-over anywhere in the <li> tag's area the cursor is an arrow pointer, but this should happen only for <li> elements that have an <a> tag with an attribute.

The below is what I have for two attempts:
  1. // This was supposed to add the linkHover class to just the first level of the menu - but this styled not only all first level elements, but the sub-menu items as well...
  2. $('#mainMenu li a').hover(function() {
  3.     $(this).addClass('linkHover');
  4. });
  1. // This is supposed to find only <a> tags in #mainMenu that have the href attribute - what it did was give me my "hand" back when mousing over the links, but didn't appear to add the linkHover class to the non-linking list items (they just got the text cursor)
  2. $('#mainMenu a').find('[href]').each(function(index){
        $(this).addClass('linkHover');
    });




The comments explain what happened for each.

How do I select a tag that does (or does not) have a particular attribute? In my case, I want to be able to select all <a> tags in #mainMenu that do not have the href attribute.