Sélectionner tout le tag a sans premier parent img jQuery

Question

Je dois sélectionner tous les tags a, mais ils ne doivent pas avoir le tag img dans le premier enfant.

J'ai écrit le script pour cela, mais j'ai omis le sélecteur.

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

et 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

Le sélecteur est:

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

Il sélectionnera tous les éléments sans aimg en eux.

Demo

Answer 2

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

Ceci est plus clair à lire que mishik réponse, mais il est aussi plus lent. Cela ne devrait pas être un problème cependant.

Selon la documentation jQuery:

La méthode .pas() finira par vous offrir un plus lisibles sélections que pousser sélecteurs complexes ou variables en: non() filtre de sélection . Dans la plupart des cas, c'est un meilleur choix.

Answer 3

Construire l'ensemble comme un sélecteur:

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

$anchors.not($containsImg); 

forme abrégée:

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

---

Une autre manière: vérifier si le lien contient une image dans le gestionnaire:

$("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"); 
    } 
}); 

Le comportement est légèrement différent: puisque la vérification est effectuée de façon dynamique, cela fonctionne également pour les ancres qui reçoivent une image après chargement de la page (par exemple: $anchor.append('<img src="..." />');)