Exemples d'utilisation des méthodes find et each dans Jquery_jquery

L'exemple de cet article décrit l'utilisation des méthodes find et each dans Jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

1. Méthode find()

Le sélecteur jquery est très puissant. En utilisant la convention de dénomination CSS, vous pouvez trouver l'élément souhaité plus rapidement et plus facilement.

Par exemple :

$("#id")
$("#"+"id")
$(this)
$(element)

Attendez, tant que vous l'utilisez avec flexibilité, vous pouvez exploser en des formes puissantes.

Cependant, en utilisation réelle, j'ai toujours l'impression qu'il y a quelques défauts.

Si vous souhaitez trouver un élément spécifique sous un certain élément, en vous appuyant simplement sur la méthode ci-dessus, vous devez parcourir l'élément obtenu par $("#id") pour obtenir ses sous-éléments. En conséquence, cela devient extrêmement lourd et la quantité de code est également très importante.

Cela nécessite donc l’utilisation de la méthode find().

$("#id").find("#child");
$("#id").find(".child");
$("#id").find("input[type='image']");

Très pratique et facile à utiliser.

En plus de la méthode find() ci-dessus, il existe également un moyen de rechercher des éléments enfants.

$(".child",parent);

Cette méthode a le même résultat que la méthode find() et est plus concise.

Donnons un exemple :

function(table){
   $("tr",table).css("background-color","red");
}

Cette méthode facilite la réutilisation du code et est plus cohérente avec l'écriture de fermeture.

2. Méthode each()

Les tableaux sont parfois souvent utilisés. Avant de connaître la méthode each(), si je rencontrais une traversée de tableau, j'écrivais généralement comme ceci :

var arr = new Array();
arr.push(1);
arr.push(2);
arr.push(3);
for(var i =0;i<arr.length;i++)
{
   (function(m){
      console.log(this);
   })(i);
}

Comme c'est encombrant ! ! Maintenant que each() est disponible, la vie devient plus facile. ​

Le code ci-dessus ne nécessite qu'une seule phrase.

var arr = new Array();
arr.push(1);
arr.push(2);
arr.push(3);
 
arr.each(function(){
  console.log(this);
});

Après utilisation de chacun, la structure devient immédiatement simple et élégante.

J'espère que cet article sera utile à la programmation jQuery de chacun.