Jquery_jqueryのfindと各メソッドの使用例

この記事の例では、Jquery での find と各メソッドの使用法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

1. find() メソッド

jquery セレクターは非常に強力で、CSS の命名規則を使用すると、目的の要素をより迅速かつ便利に見つけることができます。

例:

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

待ってください、柔軟に使用する限り、強力な形状に爆発させることができます。

しかし、実際に使ってみると、まだまだ欠点があるように感じます。

特定の要素の下にある特定の要素を見つけたい場合は、上記の方法に頼るだけで、$("#id") で取得した要素を走査してそのサブ要素を取得する必要があります。その結果、非常に煩雑になり、コード量も膨大になってしまいます。

そのため、これには find() メソッドを使用する必要があります。

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

とても便利で使いやすいです。

上記の find() メソッドに加えて、子要素を検索する方法もあります。

$(".child",parent);

このメソッドは find() メソッドと同じ結果をもたらしますが、より簡潔です。

例を挙げてみましょう:

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

このメソッドはコードの再利用を容易にし、クロージャの記述との一貫性を高めます。

2. each() メソッド

配列は時々よく使用されます。 each() メソッドを知る前は、配列トラバーサルに遭遇した場合、通常は次のように記述していました:

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);
}

なんて面倒なんでしょう！ ！ each() が利用できるようになったので、作業がより簡単になります。

上記のコードに必要な文は 1 文だけです。

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

それぞれを使用すると、その構造はすぐにシンプルでエレガントになります。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。