• このエントリーをはてなブックマークに追加

親要素の背景色を変更する

親の要素を指定し、背景を変更するサンプルコードスニペット。

HTML・jQuery

<div class="sample1">
	<div class="parent">
		parent
		<div class="children">
			children
		</div>
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
	$('.sample1 .children').parent().css('background','rgba(200,200,200,1)');
});
</script>

CSS

.sample1 .parent{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}
.sample1 .children{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}

祖先要素の背景色を変更する

親の要素の更にその親の指定、背景を変更するサンプルコードスニペット。

HTML・jQuery

<div class="sample2">
	<div class="parent">
		parent
		<div class="children">
			children
			<div class="grandchild">
				grandchild
			</div>
		</div>
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
	$('.sample2 .grandchild').parent().parent().css('background','rgba(255,255,200,1)');
});
</script>

CSS

.sample2 .parent{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}
.sample2 .children{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}
.sample2 .grandchild{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}

親要素にテキストを差し込む

親要素にテキストを差し込む。もともとあった文字は消えて、上書きされる(書き換わる)みたいです。

HTML・jQuery

<div class="sample-parent-text">
	<div class="parent">
		parent
		<div class="children">
			children
		</div>
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
	$('.sample-parent-text .children').parent().text('文字を入れました');
});
</script>

CSS

.sample-parent-text .parent{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}
.sample-parent-text .children{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}

親要素に値を差し込む

親要素にHTMLを差し込む。もともとあった文字は消えて、HTMLとともに上書きされる(書き換わる)みたいです。

HTML・jQuery

<div class="sample-parent-html">
	<div class="parent">
		parent
		<div class="children">
			children
		</div>
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
	$('.sample-parent-html .children').parent().html('<h1>見出しタグと文字を入れる</h1>');
});
</script>

CSS

.sample-parent-html .parent{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}
.sample-parent-html .children{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}

子要素に値を差し込む

子要素に段落タグと文字を入れる。

HTML・jQuery

<div class="sample-children-html">
	<div class="parent">
		parent
		<div class="children">
			children
		</div>
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
	$('.sample-children-html').children().html('<p>段落タグと文字を入れる</p>');
});
</script>

CSS

.sample-children-html .parent{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}
.sample-children-html .children{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}

次の要素(弟要素)に値を差し込む

次の要素にリストタグと文字を入れる。

HTML・jQuery

<div class="sample-next-html">
	<div class="box abc">
	abc
	</div>
	<div class="box def">
	def
	</div>
	<div class="box ghi">
	ghi
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
	$('.sample-next-html .def').next().html('<ul><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul>');
});
</script>

CSS

.sample-next-html .box{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}

孫要素に値を差し込む

孫要素に見出しタグと文字を入れる。

HTML・jQuery

<div class="sample-grandchild-html">
	<div class="parent">
		parent
		<div class="children">
			children
			<div class="grandchild">
				grandchild
			</div>
		</div>
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
	$('.sample-grandchild-html').children().children().html('<h2>見出しと文字を入れる</h2>');
});
</script>

CSS

.sample-grandchild-html .parent{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}
.sample-grandchild-html .children{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}
.sample-grandchild-html .grandchild{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}

孫兄弟要素に値を差し込む

孫兄弟要素に見出しタグと文字を入れる。

HTML・jQuery

<div class="sample-next-child-html">
	<div class="parent">
		parent
		<div class="children children1">
			children1
		</div>
		<div class="children children2">
			children2
		</div>
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
	$('.sample-next-child-html .parent').children('.children1').next().html('<ul><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul>');
});
</script>

CSS

.sample-next-child-html .parent{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}
.sample-next-child-html .children{
	margin: 1vw;
	padding: 1vw;
	border: solid 1px #000;
}