Question

我需要选择所有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-->

Answer 1

选择器是：

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

它会选择所有a元素而不包含img。

Demo

Answer 2

$("a").not("a>img")

这比mishik的答案更清楚，但它也更慢。这应该不是问题。

根据jQuery文档：

.not（）方法最终会为您提供更多可读性选择而不是将复杂的选择器或变量推送到：not（）选择器过滤器在大多数情况下，这是一个更好的选择。

Answer 3

将集合构建为选择器：

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="..." />');）

选择所有标记a而不使用第一个父img jQuery

3 个答案: