メモ帳

読むな

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

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


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

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

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

p

pspan

p

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

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 - 指定した要素の子要素のテキストを含み取得

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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").on("click",function(){
  var $true = $(this).is(":visible");
  var $false = $(this).is(":hidden");
  console.log($true);
  console.log($false);
});

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

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 - 指定した部分を取り出す

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

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から始まるインデックス番号の要素を取得

  • 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 - 指定した要素を追加

  • 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 - 選択した要素に指定した要素を追加する

  • 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 - 最新のフィルタリング処理を破棄して一つ前の選択状態に戻す

  • 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");
});