JavaScript

jQueryのnextAll()で要素タグ以降の兄弟要素タグの背景色を全て変更する方法

  /

jQueryのnextAllで要素タグ以降の兄弟要素タグの背景色を全て変更する方法をご紹介します。
タグとCSSで変更するのが面倒な時に使えます。

Contents
  1. 要素タグ以降の兄弟要素タグの背景色を全て変更するCSSの記述
  2. 要素タグ以降の兄弟要素タグの背景色を全て変更するHTMLの記述
  3. jQueryのnextAll()で要素タグ以降の兄弟要素タグの背景色を全て変更するJavaScriptの記述
  4. nextAllを使って、現在要素タグ以降の兄弟要素タグの背景色を全て変更するデモページ

要素タグ以降の兄弟要素タグの背景色を全て変更するCSSの記述

※div要素の背景を全てグレー（#cccccc）にします。必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
div{
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0 10px;
  background-color: #cccccc;
}
</style>

要素タグ以降の兄弟要素タグの背景色を全て変更するHTMLの記述

※class=”one”のdivタグ要素以降に3のdivタグを用意します。必要に応じて変更して下さい。

<h1>1番目のdiv要素タグ（class="one"）以降の兄弟要素タグの背景を全て赤色に変更してます。</h1>

<div class="one"></div>
<div></div>
<div></div>
<div></div>

jQueryのnextAll()で要素タグ以降の兄弟要素タグの背景色を全て変更するJavaScriptの記述

※jquery-2.2.0.min.jsファイルを読み込みます。$(‘始めのdivタグ’).nextAll().css({背景指定})で、始めのdivタグ（.one）以降のdivタグの背景色を全て赤色（#ff0000）に変更してます。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $('.one').nextAll().css({'background-color':'#ff0000'});
</script>
</body>

nextAllを使って、現在要素タグ以降の兄弟要素タグの背景色を全て変更するデモページ

nextAllを使って、現在要素タグ以降の兄弟要素タグの背景色を全て変更するデモ

　
※流用される場合は自己責任でお願いします。
　タグ内のGoogleアナリティクスタグは流用しないで下さい。

nextAll
RELATED POST