Найдите <a class="button"> элементы, которые не содержат <img>

Question

У меня есть следующая разметка для кнопок (может быть изменена, но я действительно не хочу):

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

Это стилизовано с использованием CSS, чтобы стать довольно аккуратной кнопкой со значком. Я использую jQuery для округления самой левой стороны кнопок:

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

Это работает как шарм. Теперь я хочу также поддерживать кнопки, которые не имеют изображений, и поэтому должны быть закруглены с обеих сторон. Простое округление всех краев для всех кнопок не сработает, так как плагин с закругленными углами рисует поверх значков.

Итак, я специально ищу селектор, чтобы выбрать , чтобы он имел элементы -детей, и другой, чтобы выбрать -элементы, которые не -детские элементы. Это возможно?

Я знаю, что могу изменить класс кнопки в зависимости от того, есть ли на ней изображение, но это кажется неправильным.

Answer 1

Вы можете использовать следующее для выбора якорей с / без дочернего изображения.

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

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

Answer 2

Чтобы выбрать элементы с классом 'button', которые содержат элемент img

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

Чтобы выбрать элементы с классом 'button', которые не содержат элемент img

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

Для краткости вы, вероятно, могли бы объединить эти утверждения в одно.