jQueryのparent()とchildren()の木の移動関数の例を日本語で書き換えると次のようになります。
jQueryは、親、子、兄弟、前の要素、次の要素を取得するために使用できる多くのツリートラバーサル関数を提供しています。今日は、jQueryのツリートラバーサルメソッドのうち2つ、つまりparent()とchildren()について説明します。
jQueryのparent()関数を日本語で言い換えると、「親」関数です。
選択したHTML要素の直接の親要素を取得するために、jQueryのparent()メソッドが使用されます。戻された親要素に対して必要なアクションを実行することができます。jQuery parent()を使用するための構文は次のとおりです。
- $(“child”).parent()
これは親要素の直接の親を返します。
- $(“child”).parent(“filter”)
フィルターはparent()メソッドに渡されるオプションのパラメーターです。
jQueryのparent()関数の例を日本語で述べると、次のようになります。
以下の例は、parent()メソッドの使用方法を示しています。jquery-parent.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Traversing Parent</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
$("h4").parent().css("background-color","yellow");
});
</script>
</head>
<body>
<span id="spanParent">Span Element - Parent of h4 element
<h4>This is an h4 element - child of Span.</h4>
</span>
</body>
</html>
この例では、親要素はであり、
は子要素です。parent()メソッドは、直接の親要素である要素を取得し、背景色を変更するために使用されます。parent()メソッドは、HTML DOMツリー内を1つだけ上に移動します。オプションのパラメータは、トラバースを絞り込むための追加のフィルタリングオプションを提供します。以下の画像は、上記のHTMLページによって生成される出力を示しており、span要素の背景色が黄色であることに注目してください。
jQueryのchildren()関数を日本語で言い換えると、以下のようになります。
「jQueryのchildren()関数」
jQueryのchildren()メソッドは、選択したHTML要素の直接の子要素を取得するために使用されます。children()メソッドを使用することで、選択した親要素の子要素を走査することができます。このメソッドを使用して、子要素に対して背景色の変更、有効化、無効化、非表示化、表示化などの操作を行うことができます。jQueryのchildren()関数の使用構文は次の通りです。
- $(“parentElement”).children()
これはパラメーターなしで使用されます。これは、parentElementの直接の子要素すべてを返すために使用されます。
- $(“parentElement”).children(“childElement”)
parentElementとchildElementはどんなHTML要素でも構いません。これにより、parentElementのすべての一致するchildElementが返されます。このメソッドのパラメータであるchildElementはオプションであり、子要素を取得するための追加のフィルタリングオプションを提供します。
jQueryのchildren()関数の例を示します。
以下の例は、children()メソッドの使用方法を示しています。jquery-children.html
<html>
<head>
<title>jQuery Traversing Children</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
//below code will run for all divs
$("div").children("p").css("background-color","yellow");
$("#spanParent").children("h4").css("background-color","green");
});
</script>
</head>
<body>
<div style="border:1px solid;">
<h3>h3 - Child of div</h3>
<p> p -Child of div</p>
<span> Span - Child of Div</span>
<p>Second p - Child of div</p>
</div>
<p> p element - Not a child of div</p>
<span id="spanParent">
<h4>This is an h4 element (child of Span).</h4>
</span>
</body>
</html>
この例では、2つの親要素、
およびが見られます。children()メソッドは、子要素を取得して要素の色を変更するために使用されます。childrenメソッドを使用して、親
要素の子要素
を返し、すべての子
要素の色を黄色に変更します。このメソッドは、div要素の外側にあるp要素は変更されないことに注意してください。同様に、span要素にはh4要素の子要素があり、この例ではその要素の色を変更します。childrenメソッドは、HTML DOMツリー内を1つのレベル下に進みます。このメソッドはテキストノードを進むために使用されません。以下は上記のHTMLページで生成される出力です。jQueryの親と子の関数の例は以上です。次の投稿では、より多くのjQueryのトラバーサル方法を見ていきます。