2010-10-18 18 views
0

J'ai un ensemble de DIV imbriqués et j'ai besoin de trouver chaque boîte externe de la boîte intérieure. Selon jQuery API, la méthode closest()obtient le premier élément ancêtre qui correspond au sélecteur. J'ai donc essayé ceci:Quel est le problème avec mon utilisation de closest()?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"><!-- 
div{ 
    margin: 1em; 
    padding: em; 
    border: 1px solid black; 
} 
--></style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"><!-- 
jQuery(function($){ 
    $(".direccion-html").closest("div").css({borderColor: "red"}); 
}); 
//--></script> 
</head> 
<body> 

<div> 
    <div class="direccion-html">Foo</div> 
</div> 
<div> 
    <div class="direccion-html">Bar</div> 
</div> 

</body> 
</html> 

Cependant, mon plus proche() sélecteur est l'élément lui-même aller chercher, et non l'un de ses ancêtres. Qu'est-ce que je fais mal? Il doit être une erreur évidente, mais je ne peux pas le faire ...

Mise à jour:

J'ai composé ce de la réponse de Nick:

jQuery(function($){ 
    $(".direccion-html").each(function(){ 
     $(this).parents("div:first").css({borderColor: "red"}); 
    }); 
}); 
+0

Il n'y a pas besoin de '.each' :) cela fonctionnera sur plusieurs éléments comme est;) –

+0

@Nick Craver, j'ai oublié de le dire dans l'exemple original mais j'ai plusieurs boîtes. Si je n'utilise pas chacun, il correspond au premier parent commun de toutes les boîtes plutôt qu'au parent de chaque boîte. –

+0

@ Álvaro - Oh, d'accord, vous avez absolument raison: "d'abord" jette les choses un peu. J'ai ajouté une alternative pour cela sans '.each()', juste traverser vers '.parent()' avant d'utiliser '.closest()' :) –

Répondre

2

.closest() commence par l'élément courant, si c'est des allumettes alors c'est le plus proche. Si vous voulez le plus proche qui est pas l'élément, utilisez .parents() avec le même sélecteur et :first, comme ceci:

jQuery(function($){ 
    $(".direccion-html").parents("div:first").css({borderColor: "red"}); 
}); 

You can test it out here. Ou, une alternative route qui travaille pour de nombreux éléments:

jQuery(function($){ 
    $(".direccion-html").parent().closest("div").css({borderColor: "red"}); 
}); 

Test that version here.

+0

Merci, c'était tout. Il me manquait la subtilité importante qu'il peut effectivement correspondre à l'élément lui-même et pas seulement ses ancêtres. –