jQuery:在元素包含图像时向元素添加类,但仅在没有文本节点时才添加

Question

我想jQuery的添加class的diog-fail到<a>时它包含<img />但不包含文本字符串,或包含文本字符串另一个HTML元素.下面的两个例子是错误的:

<a href="#">
    <img width="100" height="100" alt="alternative text" src="some/location/image.gif" />
    Some text
</a>

<a href="#">
    <img width="100" height="100" alt="alternative text" src="some/location/image.gif" />
    <span>Some text</span>
</a>

下面的例子将有jQuery的适用class的diog-fail:

<a href="#">
    <img width="100" height="100" alt="alternative text" src="some/location/image.gif" />
</a>

重要提示:文本字符串可以是任何内容.

Answer 1

只需使用.text()以获取锚点中所有文本的串联(忽略标记).然后你可以$.trim测试它的长度.将.diog-fail类添加到零长度的元素.text():

$("a:has(img)").filter(function() {
   return !$.trim($(this).text()).length; 
}).addClass("diog-fail");

在这里试试吧.