jQueryのDOM操作メソッド 〜要素の取得編〜

続き
途中だけど忘れそうなのでとりあえずアップだけしておく...
後々追加するかも
もしかしたら間違ってる部分あるかも

---

children - 指定した要素の1階層下の子要素を取得する

children()

$("#children").on("click",function(){
  $(this).children("p").css("background-color","red");
});

find - 指定した要素の子孫要素を取得する

find()

p

pspan

p

$("#find").on("click",function(){
  $("#findTarget").find("span").css("background-color","red");
});

closest - 指定した直近の親要素を取得

closest()

• listParent1
• listParent2
  • listChild1
  • listChild2
  • listChild3
• listParent3
• listParent4

$("#closest").on("click",function(){
  $("#closestTarget ul li:last-of-type").closest("ul").css("background-color","red");
});

contents - 指定した要素の子要素のテキストを含み取得

contents()

contentsTarget

$("#contents").on("click",function(){
  console.log($(".contentsTarget").contents());//要素の中のテキストも取得
  console.log($(".contentsTarget").children());//要素を取得
  $(".contentsTarget").contents().wrap('<p style="background-color: red;" />');
});

next - 指定した要素の直後の兄弟要素を返す

next() nextTarget

$("#next").on("click",function(){
  $(this).next().css("background-color","red");
});

nextAll - 指定した要素以降の兄弟要素を返す

nextAll() nextAllTarget1 nextAllTarget2 nextAllTarget3 nextAllTarget4

$("#nextAll").on("click",function(){
  $(this).nextAll("[id^='nextAllTarget']").css("background-color","red");
});

nextUntil - 指定した要素以降の兄弟要素で指定したセレクタに一致するまで選択する

nextUntil() nextUntilTarget1 nextUntilTarget2 nextUntilTarget3 nextUntilTarget4

$("#nextUntil").on("click",function(){
  $(this).nextUntil("#nextUntilTarget3","button").css("background-color","red");//第二引数でフィルタリングできる
});

prev - 指定した要素の直前の兄弟要素を返す

prevTarget() prev()

$("#prev").on("click",function(){
  $(this).prev().css("background-color","red");
});

prevAll - 指定した要素以前の兄弟要素を返す

prevAllTarget1 prevAllTarget2 prevAllTarget3 prevAllTarget4 prevAll()

$("#prevAll").on("click",function(){
  $(this).prevAll("[id^='prevAllTarget']").css("background-color","red");
});

prevUntil - 指定した要素以前の兄弟要素で指定したセレクタに一致するまで選択する

prevUntilTarget1 prevUntilTarget2 prevUntilTarget3 prevUntilTarget4 prevUntil()

$("#prevUntil").on("click",function(){
  $(this).prevUntil("#prevUntilTarget2","button").css("background-color","red");//第二引数でフィルタリングできる
});

first - 指定した要素の一番最初の要素を取得

first()

• list
• list
• list
• list

$("#first").on("click",function(){
  $("#firstTarget li").first().css("background-color","red");
});

last - 指定した要素の一番最後の要素を取得

last()

• list
• list
• list
• list

$("#last").on("click",function(){
  $("#lastTarget li").last().css("background-color","red");
});

not - 指定したセレクタを除く

not()

• list
• list
• list
• list
• list
• list

$("#not").on("click",function(){
  $("#notTarget").children("li").not(":nth-of-type(2)").css("background-color","red");
});

each - 指定した要素をループ処理

each()

• list
• list
• list
• list
• list
• list

$("#each").on("click",function(){
  $("#eachTarget li").each(function(key,value){
    $(this).text($(this).text() + key);
  });
});

is - 指定した要素などのbool値を返す

is()

$("#is").on("click",function(){
  var $true = $(this).is(":visible");
  var $false = $(this).is(":hidden");
  console.log($true);
  console.log($false);
});

has - 指定した要素などを持つ要素を取得する

has()

hasTarget1

hasTarget2

$("#has").on("click",function(){
  $("[id^='hasTarget']").has("p").css("background-color","red");
  $("[id^='hasTarget']:has(span)").css("background-color","blue");
});

siblings - 前後を問わず同じ階層の要素を取得する

siblingsTarget1

siblings()

siblingsTarget2

var $css = {
  "background-color":"red",
  "color":"white"
};
$("[id^=siblingsTarget]").css($css);
$("#siblings").on("click",function(){
  $(this).siblings("div[id^=siblingsTarget]").css("background-color","blue");
});

slice - 指定した部分を取り出す

slice()

• list
• list
• list
• list
• list

$("#slice").on("click",function(){
  $("#sliceTarget li").slice(2,4).css("background-color","red");//第二引数がなければ2番目以降〜最後まで
});

filter - 要素の絞り込み

filter()

• list
• list
• list
• list
• list

$("#filter").on("click",function(){
  $("#filterTarget li").filter(":nth-of-type(3)").css("background-color","red");
  $("#filterTarget li").filter("#last").css("background-color","blue");
});

eq - 0から始まるインデックス番号の要素を取得

eq()

• list0
• list1
• list2
• list3
• list4

$("#eq").on("click",function(){
  $("#eqTarget li").eq(3).css("background-color","red");
  $("#eqTarget li").eq(-1).css("background-color","blue");//-1で最後の要素を取得する -2の場合はlist3を取得する
});

add - 指定した要素を追加

add()

• list
• list
• list
• list

$("#add").on("click",function(){
  var $style = $("#addTarget li:nth-of-type(2)").next().add().css("background-color","red");//3番目のliにcssが適用される
  console.log($style);//2番目のli
});

addBack - 選択した要素に指定した要素を追加する

addBack()

• list
• list
• list
• list

$("#addBack").on("click",function(){
  var $style2 = $("#addBackTarget li:nth-of-type(2)").next().addBack().css("background-color","red");
  console.log($style2);//2,3番目のli
});

end - 最新のフィルタリング処理を破棄して一つ前の選択状態に戻す

end()

• list
• list
• list
• list

$("#end").on("click",function(){
  $("#endTarget").find("li:first-of-type").css("background-color","red").end().find("li:nth-of-type(2)").css("background-color","blue");
});