【jQuery】フィルタ | Webデザイナーを目指す人のブログ

フィルタ

前回はセレクタの指定方法を見ていきました。
今回はフィルタを使って特定の値を指定方法を見ていきます。
html、CSSで:first-childなどの指定方法がありましたが、わりとそれと似ている感じがします。

基本形はこのようになっています。

$(document).ready(function(){
$(“セレクタ:フィルタ”).メソッド(パラメーター)
});

1つ例を見ていきます。
最初の要素を取得する:firstを使って指定します。

<!DOCTYPE html>
  <html lang = "ja">
    <head>
      <meta charset = "utf-8">
      <title>jQueryとは</title>
    </head>
    <body>
      <div id="main">
        <div class="container">
          <p>jQueryとは</p>
          <p>セレクタとは</p>
          <p>フィルタとは</p>
        </div>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
      	$(document).ready(function(){
		  $("p:first").css("color","red")
		});
      </script>
    </body>
  </html>

するとこのように最初のp要素であるjQueryとはのみに文字色が赤になるCSSが付加されます。

以下にフィルタをまとめました。

:first	最初の要素を指定
:last	最後の要素を指定
:not(セレクタ)	指定したセレクタ以外の要素を選択
:even	偶数番目の要素を指定
:odd	奇数番目の要素を指定
:eq(index)	インデックス指定した要素を選択 :eq(0)であれば一番最初の要素
:gt(index)	指定したインデックスより後の要素を選択。
:lt(index)	指定したインデックスより前の要素を選択。
:contains(“テキスト”)	指定した文字列を含む要素を選択
:empty	空要素を選択

属性フィルタ

次は属性フィルタについてです。
属性というのは例えばa要素であればhrefやnameがそれに該当します。
この属性を持っているものや持っていないものを指定することができます。

$(document).ready(function(){
$(“セレクタ[属性フィルタ]”).メソッド(パラメーター)
});

例で属性値が指定された文字列で始まるという[属性値^=文字列]を見ていきます。

<!DOCTYPE html>
  <html lang = "ja">
    <head>
      <meta charset = "utf-8">
      <title>jQueryとは</title>
    </head>
    <body>
      <div id="main">
        <div class="container">
          <p><a href="tvit.main.jp/blog">jQueryとは</a></p>
          <p><a href="#">セレクタとは</a></p>
          <p>フィルタとは</p>
        </div>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
      	(function(){
		  $('a[href^=#]').css("backgroundcolor","red");
		});
      </script>
    </body>
  </html>

するとこのように#から始まっているセレクタとはの色が赤色に変わって・・・いかない・・・
最近よくa[href^=#]を使う機会があったからここでもやってみようと思ったけどエラーがでてしまう。
なんでだ・・・・

これは今週中にどうにかして解決する・・・

一応下の表に属性フィルタをまとめておきます。

[属性値=文字列]	属性が指定された文字列をもつ要素
[属性値!=文字列]	属性が指定された文字列をもたない要素
[属性値^=文字列]	属性が指定された文字列から始まる要素
[属性値$=文字列]	属性が指定された文字列で終わる要素
[属性値=*文字列]	属性が指定された文字列を含む要素

メソッドを使ったDOM要素の指定

jQueryについて調べていると親要素を取得したい！とか直前の要素を取得したい！という悩み相談に出会うことがあります。
そういった場合はparent()のようなメソッドを使うことで取得することが可能です。

こんな感じでセレクタの後に記述します。

$(document).ready(function(){
$(“セレクタ”).parent().メソッド(パラメーター)
});

<!DOCTYPE html>
  <html lang = "ja">
    <head>
      <meta charset = "utf-8">
      <title>jQueryとは</title>
    </head>
    <body>
      <div id="main">
        <div class="container">
          <ul>
          	<li>リスト01</li>
          	<li>
          		<ul id="second">
          			<li>リスト02-01</li>
          			<li>リスト02-02</li>
          		</ul>
          	</li>
          </ul>
        </div>
      </div>
      <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
      <script>
      	(function(){
		  $("#second").parent().css("backgroundcolor","red");
		});
      </script>
    </body>
  </html>

これも効かない・・・・
なんでだろう
jQueryのバージョン変えても効かないし・・・
困った。

これも今週中に解決するタスクに追加だ・・・
原因がわかり次第また追記していきます。