jQueryの親、子、兄弟ノードの検索方法
7627 ワード
次に、jQeryの下のノードの検索方法を羅列します.
jQuery.parent(expr)は父親ノードを探し、exprに転送してフィルタリングすることができる、例えば$(「span」)である.parent()または$(「span」).parent(".class")
jQuery.parents(expr)は、jQueryに似ています.parents(expr)ですが、親要素に限らず、すべての祖先要素を検索します.
jQuery.children(expr).すべてのサブノードを返します.このメソッドは直接の子供ノードのみを返し、すべての子孫ノードを返しません.
jQuery.contents()は、ノードとテキストを含む次のすべての内容を返します.この方法とchildren()の違いは,空白テキストも含めて1つの
jQueryオブジェクトが返され、children()はノードのみが返されます
jQuery.prev()は、前の兄弟ノードを返します.すべての兄弟ノードではありません.
jQuery.prevAll()は、すべての前の兄弟ノードを返します.
jQuery.next()は、次の兄弟ノードを返します.すべての兄弟ノードではありません.
jQuery.nextall()は、その後のすべての兄弟ノードを返します.
jQuery.Siblings()は、兄弟姉妹ノードに戻り、前後を問わず
jQuery.find(expr)、jQuery.filter(expr)は全然違います.jQuery.filter()は、初期のjQueryオブジェクトの集合から一部をフィルタし、jQuery.find()
の戻り結果は、$("p")、find("span")などの初期セットの内容はなく、p要素から探し始め、$("p span")に等しい.
実際に使った例を挙げる
次はhtmlで、最初の「li」を取得し、その中の「checkbox」を検索します.
見つけるには、
jQuery.parent(expr)は父親ノードを探し、exprに転送してフィルタリングすることができる、例えば$(「span」)である.parent()または$(「span」).parent(".class")
jQuery.parents(expr)は、jQueryに似ています.parents(expr)ですが、親要素に限らず、すべての祖先要素を検索します.
jQuery.children(expr).すべてのサブノードを返します.このメソッドは直接の子供ノードのみを返し、すべての子孫ノードを返しません.
jQuery.contents()は、ノードとテキストを含む次のすべての内容を返します.この方法とchildren()の違いは,空白テキストも含めて1つの
jQueryオブジェクトが返され、children()はノードのみが返されます
jQuery.prev()は、前の兄弟ノードを返します.すべての兄弟ノードではありません.
jQuery.prevAll()は、すべての前の兄弟ノードを返します.
jQuery.next()は、次の兄弟ノードを返します.すべての兄弟ノードではありません.
jQuery.nextall()は、その後のすべての兄弟ノードを返します.
jQuery.Siblings()は、兄弟姉妹ノードに戻り、前後を問わず
jQuery.find(expr)、jQuery.filter(expr)は全然違います.jQuery.filter()は、初期のjQueryオブジェクトの集合から一部をフィルタし、jQuery.find()
の戻り結果は、$("p")、find("span")などの初期セットの内容はなく、p要素から探し始め、$("p span")に等しい.
実際に使った例を挙げる
次はhtmlで、最初の「li」を取得し、その中の「checkbox」を検索します.
<li class="list-group-item completed_item">
<div class="text_holder">
reerytre
<div class="btn-group pull-right">
<button class="delete btn btn-warning">Delete</button>
<button class="edit btn btn-success">Edit</button>
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" class="pull-right"></label>
</div>
</li>
li = $(li);
見つけるには、
1:
checkbox = li.children(":first").next().children(":first").children(":first");
checkbox = li.children(":last").children(":first").children(":first");
2:
checkbox = li.find('input');
...