2010-03-13 3 views
13

J'ai récemment sauté dans le monde de jQuery. J'ai vu les méthodes find() et filter() mais ne peux pas comprendre la différence entre les deux.Différence entre find et le filtre

Quelle est exactement la différence entre les deux?

Répondre

20

filter réduit l'ensemble des éléments déjà appariés, tandis que find obtient les descendants de l'élément correspondant.

3

find() renvoie les enfants des éléments de match pour le sélecteur donné, filter() examine les éléments appariés et renvoie ceux qui également correspondent le sélecteur donné.

7

find()

find() renvoie les descendants des éléments sélectionnés qui correspondent à la sélection.

De l'doc:

Description: Obtenir les descendants de chaque élément dans l'ensemble courant d'éléments appariés, filtré par un sélecteur.

filtre()

filter() filtre les éléments en fonction de la sélection ou de la fonction prévue.

De l'doc:

Description: Réduire l'ensemble d'éléments adaptés à ceux qui correspondent à la sélection ou passent le test de la fonction.

7

En cherchant des réponses à la question, j'ai trouvé un bon blog expliquant la même chose. Voici le link

vous essayez aussi sur jsfiddle

<html> 
<head> 
    <style>div{ padding:8px; border:1px solid; }</style> 
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){  
     $("#filterClick").click(function() { 
       $('div').css('background','white');  
       $('div').filter('#Fruits').css('background','red'); 
     });  

     $("#findClick").click(function() { 
       $('div').css('background','white'); 
       $('div').find('#Fruits').css('background','red'); 
     });  
    });   

    </script> 
</head> 
<body> 
    <h1>jQuery find() vs filter() example</h1> 
    <div id="Fruits"> 
     Fruits 
     <div id="Apple">Apple</div> 
     <div id="Banana">Banana</div> 
    </div>  
    <div id="Category"> 
     Category 
     <div id="Fruits">Fruits</div> 
     <div id="Animals">Animals</div> 
    </div> 
    <br/><br/><br/> 
    <input type='button' value='filter(Fruits)' id='filterClick'> 
    <input type='button' value='find(Fruits)' id='findClick'>  
</body> 

Questions connexes