タグ別アーカイブ: jquery

jQueryで要素を削除する|remove(), empty(), unwrap(), detach()

remove() は要素を丸ごと削除する

$(“#parent”).remove();

empty() は要素の中を空にする

$(“#parent”).empty();

unwrap() は親要素を削除する

$(“#child”).unwrap();

detach() は 削除した要素を再利用する

//【1】#targetをクリックすると背景を赤に変更
$(‘#target’).on(“click”, function(){
$(this).css(‘background’ , ‘red’);
});

//【2】detachボタンをクリックするとdetach
$(‘#detach’).on(“click”, function() {
div = $(‘#target’).detach();
});

//【3】removeボタンをクリックするとremove
$(‘#remove’).on(“click”, function() {
div = $(‘#target’).remove();
});

//【4】再表示ボタンをクリックすると再表示
$(‘#append’).on(“click”, function() {
$(‘#detach’).before(div);
});

jQuery 子要素を検索する、取得する方法:children(), find()など

全ての子孫要素から取得する.find()

$(“#parent”).find(‘.child-image’);

直下の子要素を取得する.children()

$(“#parent”).children(‘img’);

セレクタを使って子要素を取得する

$(“#parent div”);

子要素のn番目の要素を指定

$(“#parent p:first”).css(“color”, “red”);

$(“#parent p:last”).css(“color”, “red”);

$(“#parent p:nth-child(2)”).css(“color”, “red”);

jQuery 属性値で目的の要素を検索する、絞り込む方法 -属性-

特定の属性を検索して要素を取得する

$(function() {  $(‘option[selected]’).css(‘background-color’, ‘Yellow’);});

属性値が、ある値に等しい要素だけを検索して取得する

$(‘option[value=””]’).css(‘background-color’,’Yellow’);

属性値が、ある値に等しくない要素だけを検索して取得する

$(‘option[value!=””]’).css(‘background-color’,‘Yellow’);