要素を探す【.find( ) – jquery】

2019/6/23 2022/5/3 中級者

Pocket

今回はjqueryの.find( )を使用した、条件分岐をご紹介いたします。

デモはこちら

<仕様>

・item04とitem06,item07を.find( )で見つけて、それぞれjqueryのaddClass( )を用いて文字色を変更します

それでは、解説。

○index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/sanitize.css">
    <link rel="stylesheet" href="css/common.css">
    <title>デモ</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header></header>
    <main ontouchstart="">
      <div class="backgroundBox">
        <div class="Container">
          <p class="item01">item01</p>
          <p class="item02">item02</p>
          <p class="item03">item03</p>
          <p class="item04">item04</p>
          <p class="item05">item05</p>
          <div class="box">
            <p class="item06">item06</p>
            <p class="item07">item07</p>
          </div>
          <div class="box">
            <p class="item08">item08</p>
            <p class="item09">item09</p>
          </div>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer>
      <script src="js/jquery-2.0.0.min.js"></script>
      <script src="js/common.js"></script>
    </footer>
  </body>
</html>

・Containe直下にitem01~item05とboxが二つあります

○index.css

.Container {
  max-width: 960px;
  padding: 20px;
  margin: 0 auto 20px;
  background-color: #9e9e9e40;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

・addClass用にredとblueを用意

○common.js

$(function() {
    var target01 = $('.Container').find('.item04');
    $(target01).addClass("red");

    var target02 = $('.Container').find('.box');
    if(target02.length = 2){
      var target03 = $('.Container').find('.box').first();
      $(target03).addClass("blue");
    }

    console.log(target01);
    console.log(target02);
    console.log(target02.length);
    console.log(target03);
});

・var 〇〇で変数を宣言target01,target02,target03が変数

①

・target01はContainer要素から、item04という名前のクラスを取得

・その後target01に取得した要素が入っているので、redというクラスを追加

②

・target02はContainer要素から、boxという名前のクラスを取得

・target02.lengthで取得した要素の個数が分かるので、要素の数が2個の時ifの中身を実行

③

・target03はContainer要素から、boxという名前のクラスの最初の一つを取得

・その後target03に取得した要素が入っているので、blueというクラスを追加

③ように、.find( )は.first( )などと同時に使用することで検索の幅が広がります。

今回は以上です。