siblings()で指定したタグ要素の兄弟要素タグを全て抽出する方法【jQuery】｜DAD UNION

jQueryを使って、siblings()で指定したタグ要素の兄弟要素タグを全て抽出する方法をご紹介します。
siblings()を使うと指定したタグ要素の兄弟要素タグを全て抽出することができます。
今回は指定したタグ要素の兄弟要素タグ全てのCSSを変更してみます。

Contents

siblings()で指定したタグ要素の兄弟要素タグを全て抽出するCSSの記述
siblings()で指定したタグ要素の兄弟要素タグを全て抽出するHTMLの記述
jQueryを使って、siblings()で指定したタグ要素の兄弟要素タグを全て抽出するJavaScriptの記述
【siblings】指定したタグ要素の兄弟要素タグ全てのcssを変更するデモページ

siblings()で指定したタグ要素の兄弟要素タグを全て抽出するCSSの記述

※必要に応じて書き換えてください。

<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:30px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  position: relative;
}
ul,ol{
  width: 300px;
  margin: 0 auto;
}
ul li,ol li{
  font-weight: bold;
  margin-bottom: 4px;
}
</style>

siblings()で指定したタグ要素の兄弟要素タグを全て抽出するHTMLの記述

※指定するclass=”crnt”タグに、兄弟要素タグが出来るようにしてます。必要に応じて書き換えてください。

<h1>class="crnt"タグ要素の兄弟要素タグの文字色と背景色を全て変更します</h1>


<ul>
  <li>長男</li>
  <li class="crnt">次男</li>
  <li>三男</li>
  <li>四男</li>
</ul>

<br>

<ol>
  <li>長女</li>
  <li>次女</li>
  <li>三女</li>
  <li class="crnt">四女</li>
</ol>

jQueryを使って、siblings()で指定したタグ要素の兄弟要素タグを全て抽出するJavaScriptの記述

※jquery-2.2.0.min.jsファイルを読み込みます。 $(“指定タグ”).siblings()で指定したclass=”crnt”タグの兄弟要素タグの文字色と背景色を変更します。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".crnt").siblings().css({'color':'#006DD9','background-color':'#cccccc'});
});
</script>