「jQuery」parentとchildrenメソッドで親と子の要素に移動するサンプル

2022年9月26日

環境
jQuery 3.6.0
Google Chrome 105.0.5195.127
Windows 10 home　64bit

構文
1.親の要素の移動
$(セレクター名).parent()
parentを使って親に移動します。

2.子要素の移動
$(セレクター名).children()
childrenを使用して、子要素に移動します。

使用例

<!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 = $("#pA").parent(); // 親要素に移動
      cftA.css("color", "skyblue"); // 行の文字が緑になる※
      
      //子要素
      const d2 = $("#pB").children(); // 子要素に移動
      d2.css("color", "red"); // 文字が黄色になる
     });
    });
</script>
</head>
<body>

<div id="pA">AA
      <div id="pB">BB
        <div id="pC1">CC 33</div>
            <div id="pC2">CC 44</div>
      </div>
</div>
<input type="button" id="btnchk" value="検証" />

</body>
</html>

実行結果
「検証」ボタンを押すと、1と2行のテキストの文字が「skyblue」になります。
3と4行のテキストの文字が「red」になります。

jQuery

Posted by arkgame

関連投稿: