1

我需要选择所有a标签,但它们不应该img在第一个孩子中有标签。

我为它编写了脚本,但省略了选择器。

 $(document).ready(function() {
     $().mouseenter(function(i) {
         $(this).css("border","2px solid orange");
     }).mouseleave(function(i){
         $(this).css("border","none");
     });
 });

和 HTML:

<a href=""></a><!--need to select-->
<a href=""><!--don't need to select-->
   <img src"">
</a>
<a href=""></a><!--need to select-->
4

3 回答 3

5

选择器是:

$("a:not(:has(img))")

它将选择所有a没有其中的元素img

演示

于 2013-07-05T13:41:12.820 回答
3
$("a").not("a>img")

这比 mishik 答案更易于阅读,但速度也较慢。不过这应该不是问题。

根据 jQuery 文档:

.not() 方法最终将为您提供比将复杂的选择器或变量推入 :not() 选择器过滤器更易读的选择。在大多数情况下,这是一个更好的选择。

于 2013-07-05T13:42:44.813 回答
0

将集合构建为选择器:

var $anchors = $("a");
var $containsImg = $("a").children("img").parent();

$anchors.not( $containsImg );

较短的形式:

var $anchors = $("a");
$anchors.not( $anchors.children("img").parent() );

另一种方法:检查链接是否包含处理程序内的图像:

$("a").mouseenter(function(){
    if ( $(this).children("img").length == 0 ){
        $(this).css("border", "2px solid orange");
    }
}).mouseleave(function(){
    if ( $(this).children("img").length == 0 ){
        $(this).css("border", "none");
    }
});

行为略有不同:由于检查是动态完成的,这也适用于在页面加载$anchor.append('<img src="..." />');接收图像的锚点(例如:)

于 2013-07-05T13:47:02.337 回答