obj の親要素を返します。parents() が先祖すべてを返すのに対して、parent() は親要素のみを返します。selector を指定した場合は、セレクタにマッチする親要素のみを返します。
$("#t1").parent().css("color", "red");
obj の先祖要素をすべて返します。parent() が親要素のみを返すのに対して、parents() は先祖要素すべてを返します。selector を指定した場合は、セレクタにマッチする先祖要素のみを返します。
$("#t1").parents().css("color", "red");
obj の祖先要素の中で、selector にマッチする要素までの祖先要素を返します。filter を指定すると、さらに、filter にマッチする要素に絞り込みます。obj 自身と selector にマッチする要素は含まれません。
$("td").parentsUntil("body"); // TR, TBODY, TABLE...
obj の先祖要素の中から selector にマッチするもっとも近い先祖要素を返します。
$("li.data").closest("ul").css("color", "red");
obj の先祖要素の中から、positionスタイルに relative, absolute, fixed が指定されているもっとも近い先祖要素を返します。
$("li.data").offsetParent().css("background-color", "#ffcccc");
obj の子要素の中から selector にマッチする要素を返します。引数を省略した場合はすべての子要素を返却します。下記の例では、id="t1" のテーブルの子要素(tbody)のさらに子要素(tr)を取得し、色を変更します。
$("#t1").children("tbody").children("tr").css("color", "red");
obj の子孫要素の中から selector等にマッチする要素を返します。
$("#table1").find("td").css("color", "red");
obj の兄弟要素をすべて返します。selector を指定した場合は、結果の中からセレクタにマッチする要素のみを返します。
$("div#d3").siblings().css("color", "red");
obj の兄弟要素の中から前の(後ろの)兄弟要素をすべて返します。selector を指定した場合は、結果の中からセレクタにマッチする要素のみを返します。
$("div#d3").prevAll().css("color", "red");
obj の兄弟要素の中からひとつ前の(後ろの)兄弟要素を返します。selector を指定した場合は、結果の中からセレクタにマッチする要素のみを返します。
$("div#d3").prev().css("color", "red");
obj に対して前方の(後方の)兄弟要素の中から selector にマッチする要素までの要素を返します。obj 自体や selector にマッチする要素は含みません。例えば下記の例では、d3, d4, d5 の要素がマッチします。filter を指定した場合は、結果の中から filter にマッチする要素のみを返します。
$("#d2").nextUntil("#d6").css("color", "red");
<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>
obj の中から selector にマッチする要素を返します。
$("tr").filter(".data").css("color", "red");
obj の中から最初の(最後の)要素を返します。
$("tr").first().css("color", "red");
obj の中から n番目の要素を返します。最初の要素が 0番目になります。マイナスの値を指定した場合は、最後から数えて n番目の要素を返します。最後の要素が -1番目になります。
$("tr").eq(2).css("color", "red");
obj の中から n番目から m番目未満の要素を返します。最初の要素が 0番目になります。下記の例では、0, 1, 2番目の要素を返します。負の値を指定した場合後ろから数えます。最後の要素が -1番目になります。
$("div").slice(0, 3).css("color", "red");
obj の中から selector にマッチする要素を子孫要素として持つ要素をを返します。
$("table").has("caption").css("color", "red");
obj の中から selector にマッチしない要素をを返します。
$("div.data").not(".except").css("color", "red");
obj の中から selector にマッチする要素が一つでもあれば true を、さもなくば false を返します。
if ($("div").is(".data")) {
alert("Find!");
}
obj のひとつひとつに対して callback を実行し、その戻り値のリストを返します。下記の例では、input要素に入力された値をカンマ(,)で連結した文字列を表示します。map() の返却値は jQueryオブジェクトの配列ですが、get() を用いて JavaScript の配列に変換することができます。
alert($("input").map(function() {
return $(this).val();
}).get().join());
obj要素の子要素の集合を、テキストやコメントを含めて返します。.children() が子要素のみを返すのに対して、テキストやコメントも返す点が異なります。下記の例では、T1テキスト、C1コメント、d2要素、T2テキスト、d3要素、T3テキストの6子の配列を返します。
$("div#d1").contents().each(function() {
if ($(this).attr("id")) {
alert($(this).attr("id"));
} else {
alert($(this).text());
}
});
<div id="d1"> T1 <!--C1--> <div id="d2">D2</div> T2 <div id="d3">D3</div> T3 </div>
obj 要素に加えて、selector にマッチする要素を加えた要素を返します。例えば下記の例では、HTML文書中の div要素の集合に、同じ文書中の p要素の集合を加えた要素を返します。$("div").add("p") は、$("div, p") と同じ意味を持ちます。
$("div").add("p").css("color", "red");
.next() や .find() などの操作を行った際、操作を行う前の要素を返します。例えば下記の例では、d3要素を緑に、次の d4要素を赤に、次の d5要素を青にします。.end()で一つ戻って d4要素の背景を黄色に、もう一つ戻って d3要素の背景をピンクにします。
$("div#d3").css("color", "green")
.next().css("color", "red")
.next().css("color", "blue")
.end().css("background", "yellow")
.end().css("background", "pink");
<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>
.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 で廃止されました。
$("div#d3").nextAll().addBack().css("color", "red");
<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>