「jQuery」siblingsメソッドで自分以外の兄弟を指定するサンプル
環境
jQuery 3.6.0
Google Chrome 105.0.5195.127
Windows 10 home 64bit
構文
$(セレクター名).siblings();
siblingsを使用して自要素以外の兄弟を指定します。
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
//ボタンクリック動作
$("#btnchk").click(function(){
//自分以外の兄弟要素を指定
const cftA = $("#pC").siblings();
cftA.css("color", "skyblue"); // 行の文字がskyblueになる
});
});
</script>
</head>
<body>
<div id="pA">AA
<div id="pB">BB 11</div>
<div id="pC">BB 22</div>
<div id="pD">BB 33</div>
</div>
<br>
<input type="button" id="btnchk" value="検証" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
//ボタンクリック動作
$("#btnchk").click(function(){
//自分以外の兄弟要素を指定
const cftA = $("#pC").siblings();
cftA.css("color", "skyblue"); // 行の文字がskyblueになる
});
});
</script>
</head>
<body>
<div id="pA">AA
<div id="pB">BB 11</div>
<div id="pC">BB 22</div>
<div id="pD">BB 33</div>
</div>
<br>
<input type="button" id="btnchk" value="検証" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
//ボタンクリック動作
$("#btnchk").click(function(){
//自分以外の兄弟要素を指定
const cftA = $("#pC").siblings();
cftA.css("color", "skyblue"); // 行の文字がskyblueになる
});
});
</script>
</head>
<body>
<div id="pA">AA
<div id="pB">BB 11</div>
<div id="pC">BB 22</div>
<div id="pD">BB 33</div>
</div>
<br>
<input type="button" id="btnchk" value="検証" />
</body>
</html>
実行結果
「検証」ボタンを押すと、「BB 11」と「BB 33」の文字の色はskyblueになります。