jQueryで子要素を取得するサンプルコード
jQueryを使用して子要素を取得するサンプルコードは次のようになります。
<!DOCTYPE html>
<html>
<head>
<title>子要素の取得</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="parent">
<div class="child">子要素1</div>
<div class="child">子要素2</div>
<div class="child">子要素3</div>
</div>
<script>
$(document).ready(function() {
// 子要素を取得して処理する
var children = $("#parent").children();
children.each(function() {
var childText = $(this).text();
console.log(childText);
});
});
</script>
</body>
</html>
この例では、parentというIDを持つ要素の直下にある子要素を取得し、それぞれのテキストをコンソールに出力しています。children()メソッドを使用してparent要素の子要素を取得し、each()メソッドを使用して各子要素に対して繰り返し処理を行っています。子要素のテキストはtext()メソッドを使用して取得しています。
このコードを実行すると、子要素1から子要素3までのテキストが順にコンソールに表示されます。
特定の属性を持つ子要素を取得するサンプルコード
特定の属性を持つ子要素を取得するために、jQueryのfind()メソッドを使用します。以下にサンプルコードを示します。
<!DOCTYPE html>
<html>
<head>
<title>特定の属性を持つ子要素の取得</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="parent">
<div class="child" data-type="fruit">りんご</div>
<div class="child" data-type="fruit">ばなな</div>
<div class="child" data-type="vegetable">にんじん</div>
<div class="child" data-type="vegetable">じゃがいも</div>
</div>
<script>
$(document).ready(function() {
// 特定の属性を持つ子要素を取得して処理する
var children = $("#parent").find("[data-type='fruit']");
children.each(function() {
var childText = $(this).text();
console.log(childText);
});
});
</script>
</body>
</html>
この例では、data-type属性が"fruit"である子要素のみを取得しています。find()メソッドを使用して、$("#parent")要素の中から[data-type='fruit']セレクタを持つ子要素を取得しています。そして、各子要素のテキストをコンソールに出力しています。
このコードを実行すると、"りんご"と"ばなな"というテキストが順にコンソールに表示されます。data-type属性が"fruit"である子要素だけが取得されます。