Find <a class="button"> elements that do not contain <img>

Question

I have the following markup for buttons (can be changed, but I really don't want to):

<a href="#" class="button">
  Button text
  <img src="someimage.png" />
</a>

This is styled using CSS to become a rather neat button with an icon on it. I am using jQuery to round the leftmost side of the buttons:

$('a.button').corner('tl bl 10px');

This works like a charm. Now I want to also support buttons that do not have images, and therefore should be rounded on both sides. Simply rounding all edges for all buttons won't work, as the rounded corners plugin paints on top of the icons.

So, I am specifically looking for a selector to select <a class="button"> to does have <img>-child elements, and another to select <a class="button">-elements that do not have <img>-child elements. Is this possible?

I know I could change the class of the button depending on whether or not it has an image inside it, but that just feels wrong.

Answer 1

You can use the following to select anchors with / without a child image

$('a.button:has(img)')

$('a.button:not(:has(img))')

Answer 2

To select a elements with class of 'button' that contain an img element

$('a.button:has(img)').corner('tl bl 10px');

To select a elements with class of 'button' that do not contain an img element

$('a.button:not(:has(img))').corner()

You could probably chain these statements into one for brevity