とほほのjQuery入門

トップ > jQuery > Traversing

Traversing(Tree Traversal)

obj.parent([selector]) (1.0)

obj の親要素を返します。parents() が先祖すべてを返すのに対して、parent() は親要素のみを返します。selector を指定した場合は、セレクタにマッチする親要素のみを返します。

JavaScript
$("#t1").parent().css("color", "red");
obj.parents([selector]) (1.0)

obj の先祖要素をすべて返します。parent() が親要素のみを返すのに対して、parents() は先祖要素すべてを返します。selector を指定した場合は、セレクタにマッチする先祖要素のみを返します。

JavaScript
$("#t1").parents().css("color", "red");
obj.parentsUntil([selector][, filter]) (1.4)
obj.parentsUntil([element][, filter]) (1.6)

obj の祖先要素の中で、selector にマッチする要素までの祖先要素を返します。filter を指定すると、さらに、filter にマッチする要素に絞り込みます。obj 自身と selector にマッチする要素は含まれません。

JavaScript
$("td").parentsUntil("body");     // TR, TBODY, TABLE...
obj.closest(selector) (1.3)
obj.closest(selector[, context) (1.4)
obj.closest(jQuery object) (1.6)
obj.closest(element) (1.6)

obj の先祖要素の中から selector にマッチするもっとも近い先祖要素を返します。

JavaScript
$("li.data").closest("ul").css("color", "red");
obj.offsetParent() (1.2.6)

obj の先祖要素の中から、positionスタイルに relative, absolute, fixed が指定されているもっとも近い先祖要素を返します。

JavaScript
$("li.data").offsetParent().css("background-color", "#ffcccc");
obj.children([selector]) (1.0)

obj の子要素の中から selector にマッチする要素を返します。引数を省略した場合はすべての子要素を返却します。下記の例では、id="t1" のテーブルの子要素(tbody)のさらに子要素(tr)を取得し、色を変更します。

JavaScript
$("#t1").children("tbody").children("tr").css("color", "red");
obj.find(selector) (1.0)
obj.find(jQueryObject) (1.6)
obj.find(element) (1.6)

obj の子孫要素の中から selector等にマッチする要素を返します。

JavaScript
$("#table1").find("td").css("color", "red");
obj.siblings([selector]) (1.0)

obj の兄弟要素をすべて返します。selector を指定した場合は、結果の中からセレクタにマッチする要素のみを返します。

JavaScript
$("div#d3").siblings().css("color", "red");
obj.prev([selector]) (1.0)
obj.next([selector]) (1.0)

obj の兄弟要素の中から前の(後ろの)兄弟要素をすべて返します。selector を指定した場合は、結果の中からセレクタにマッチする要素のみを返します。

JavaScript
$("div#d3").prevAll().css("color", "red");
obj.prevAll([selector]) (1.2)
obj.nextAll([selector]) (1.2)

obj の兄弟要素の中からひとつ前の(後ろの)兄弟要素を返します。selector を指定した場合は、結果の中からセレクタにマッチする要素のみを返します。

JavaScript
$("div#d3").prev().css("color", "red");
obj.prevUntil([selector][, filter]) (1.4)
obj.prevUntil([element][, filter]) (1.6)
obj.nextUntil([selector][, filter]) (1.4)
obj.nextUntil([element][, filter]) (1.6)

obj に対して前方の(後方の)兄弟要素の中から selector にマッチする要素までの要素を返します。obj 自体や selector にマッチする要素は含みません。例えば下記の例では、d3, d4, d5 の要素がマッチします。filter を指定した場合は、結果の中から filter にマッチする要素のみを返します。

JavaScript
$("#d2").nextUntil("#d6").css("color", "red");
HTML
<div id="d1">AAA</div>
<div id="d2">AAA</div>
<div id="d3">AAA</div>
<div id="d4">AAA</div>
<div id="d5">AAA</div>
<div id="d6">AAA</div>

Traversing(Filtering)

obj.filter(selector) (1.0)
obj.filter(function(index, element)) (1.0)
obj.filter(elements) (1.4)
obj.filter(selection) (1.4)

obj の中から selector にマッチする要素を返します。

JavaScript
$("tr").filter(".data").css("color", "red");
obj.first() (1.4)
obj.last() (1.4)

obj の中から最初の(最後の)要素を返します。

JavaScript
$("tr").first().css("color", "red");
obj.eq(n) (1.1.2)
obj.eq(-n) (1.4)

obj の中から n番目の要素を返します。最初の要素が 0番目になります。マイナスの値を指定した場合は、最後から数えて n番目の要素を返します。最後の要素が -1番目になります。

JavaScript
$("tr").eq(2).css("color", "red");
obj.slice(n[, m]) (1.1.4)

obj の中から n番目から m番目未満の要素を返します。最初の要素が 0番目になります。下記の例では、0, 1, 2番目の要素を返します。負の値を指定した場合後ろから数えます。最後の要素が -1番目になります。

JavaScript
$("div").slice(0, 3).css("color", "red");
obj.has(selector) (1.4)
obj.has(element) (1.4)

obj の中から selector にマッチする要素を子孫要素として持つ要素をを返します。

JavaScript
$("table").has("caption").css("color", "red");
obj.not(selector) (1.0)
obj.not(elements) (1.0)
obj.not(function(index, element)) (1.4)
obj.not(jQueryObject) (1.4)

obj の中から selector にマッチしない要素をを返します。

JavaScript
$("div.data").not(".except").css("color", "red");

Traversing(Filtering Operation)

obj.is(selector) (1.0)
obj.is(function(index, element)) (1.6)
obj.is(jQueryObject) (1.6)
obj.is(element) (1.6)

obj の中から selector にマッチする要素が一つでもあれば true を、さもなくば false を返します。

JavaScript
if ($("div").is(".data")) {
    alert("Find!");
}
obj.map(callback(index, domElement)) (1.2)

obj のひとつひとつに対して callback を実行し、その戻り値のリストを返します。下記の例では、input要素に入力された値をカンマ(,)で連結した文字列を表示します。map() の返却値は jQueryオブジェクトの配列ですが、get() を用いて JavaScript の配列に変換することができます。

JavaScript
alert($("input").map(function() {
    return $(this).val();
}).get().join());

Traversing(Miscellaneous Traversing)

obj.contents() (1.2)

obj要素の子要素の集合を、テキストやコメントを含めて返します。.children() が子要素のみを返すのに対して、テキストやコメントも返す点が異なります。下記の例では、T1テキスト、C1コメント、d2要素、T2テキスト、d3要素、T3テキストの6子の配列を返します。

JavaScript
$("div#d1").contents().each(function() {
    if ($(this).attr("id")) {
        alert($(this).attr("id"));
    } else {
        alert($(this).text());
    }
});
HTML
<div id="d1">
  T1
  <!--C1-->
  <div id="d2">D2</div>
  T2
  <div id="d3">D3</div>
  T3
</div>
obj.add(selector) (1.0)
obj.add(elements) (1.0)
obj.add(html) (1.0)
obj.add(selection) (1.3.2)
obj.add(selector, context) (1.4)

obj 要素に加えて、selector にマッチする要素を加えた要素を返します。例えば下記の例では、HTML文書中の div要素の集合に、同じ文書中の p要素の集合を加えた要素を返します。$("div").add("p") は、$("div, p") と同じ意味を持ちます。

JavaScript
$("div").add("p").css("color", "red");
obj.end() (1.0)

.next() や .find() などの操作を行った際、操作を行う前の要素を返します。例えば下記の例では、d3要素を緑に、次の d4要素を赤に、次の d5要素を青にします。.end()で一つ戻って d4要素の背景を黄色に、もう一つ戻って d3要素の背景をピンクにします。

JavaScript
$("div#d3").css("color", "green")
    .next().css("color", "red")
    .next().css("color", "blue")
    .end().css("background", "yellow")
    .end().css("background", "pink");
HTML
<div id="d1">D1</div>
<div id="d2">D2</div>
<div id="d3">D3</div>
<div id="d4">D4</div>
<div id="d5">D5</div>
obj.andSelf([selector]) (1.2)
obj.addBack([selector]) (1.8)

.nextAll() や .find() などの操作を行った際、操作を行った後の要素集合に加えて、操作を行う前の要素集合を加えたものを返します。例えば下記の例では、$("div#d3") は d3要素を、$("div#d3").nextAll() は d4, d5要素を返しますが、$("div#d3").nextAll().addBack() は、d4, d5要素に d3要素を加えた集合を返します。jQuery 1.2 では .andSelf() としてサポートされましたが、jQuery 1.8 からは .addBack() に名称が変更されました。andSelf() は jQuery 3.0 で廃止されました。

JavaScript
$("div#d3").nextAll().addBack().css("color", "red");
HTML
<div id="d1">D1</div>
<div id="d2">D2</div>
<div id="d3">D3</div>
<div id="d4">D4</div>
<div id="d5">D5</div>

Copyright (C) 2013-2019 杜甫々
初版:2013年2月3日、最終更新:2019年5月5日
http://www.tohoho-web.com/js/jquery/traversing.htm