jqueryは子要素の値を取得します

フロントエンド開発では、要素の子要素の値を取得する必要があることがよくあります。子要素の数が少ない場合は、手作業で一つ一つ取得するのはそれほど面倒ではありませんが、子要素の数が多かったり、数が不明な場合には、この方法は間違いなく現実的ではありません。このとき、jQueryの強力な機能を利用すると、要素の下位要素の値を簡単に取得することができます。

まず、例を見てみましょう。次の HTML コードがあるとします。

<div id="container">
  <div class="child">第1个子元素</div>
  <div class="child">第2个子元素</div>
  <div class="child">第3个子元素</div>
  <div class="child">第4个子元素</div>
  <div class="child">第5个子元素</div>
</div>

次に、3 番目の子要素の値を取得する必要があります。 jQuery の構文によれば、次のコードを使用できます。

var thirdChild = $('#container .child:eq(2)').text();
alert(thirdChild);

ここでは、jQuery のセレクター構文を使用します。つまり、最初に $('#container') を通じてコン​​テナー要素を選択します。次に、 use .child で取得する子要素のクラス名を指定し、最後に :eq(2) を使用して 3 番目の子要素を取得することを指定します。ここでのインデックスは 0 から計算されるため、3 の代わりに 2 を使用することに注意してください。

他の jQuery セレクター構文を使用することもできます。たとえば、:first を使用して最初の子要素の値を取得し、:last を使用して子要素の値を取得します。最後の子要素。要素の値。すべての奇数および偶数の子要素の値を取得するには、:odd および :even を使用します。

var firstChild = $('#container .child:first').text();
var lastChild = $('#container .child:last').text();
var oddChildren = $('#container .child:odd').text();
var evenChildren = $('#container .child:even').text();
alert(firstChild);
alert(lastChild);
alert(oddChildren);
alert(evenChildren);

セレクター構文の使用に加えて、jQuery の children() 関数を使用して要素のすべての子要素を取得し、eq() を通じてインデックスを付けることもできます。 どの子要素の値を取得するかを指定します。例:

var thirdChild = $('#container').children('.child').eq(2).text();
alert(thirdChild);

ここのコードは最初の例と非常によく似ていますが、唯一の違いは、children() 関数と eq() の使用です。索引。

実際の開発プロセスでは、Ajax を介して動的にロードされるコンテンツなど、サブ要素の数が不確実な状況が発生する可能性があることに注意してください。このとき、最初に children() 関数を使用してすべての子要素を取得し、次に .length 属性を使用して子要素の数を取得し、動的に生成します。子要素の値を取得するためのインデックス。例:

var numChildren = $('#container').children('.child').length; // 获取子元素的数量
for(var i=0; i<numChildren; i++) {
  var childText = $('#container').children('.child').eq(i).text(); // 动态生成索引获取每个子元素的值
  alert('第' + (i+1) + '个子元素的值是：' + childText);
}

上記のコードでは、for ループと文字列結合関数を使用して、すべてのサブ要素の値をバッチで取得し、1 つずつ表示します。

最後に、jQuery では、.eq() と :eq() は同じ機能を持っていることに注意してください。つまり、インデックスに基づくコレクション要素を指定するための関数とセレクター構文。ただし、場合によっては、セレクターを簡素化する必要があるため、:eq() 構文を使用して記述したほうが理解しやすくなる場合があります。

以上がjqueryは子要素の値を取得しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。