【jQuery入門 3】要素を取得しよう。セレクタって何？機能的セレクタ編

まりぞ

2016.04.28

フロントエンジニア

ほいほい。まりぞーです。

前回から引き続き、jQueryのセレクタについてです。
前回 : 【jQuery入門 2】セレクタって何？要素を取得しよう。基本編

今回は、.next()や.is()、.parent()など、機能的なセレクタの使い方をご紹介します。

今回もデモがあったりします。

目次
機能的なセレクタ一覧
find()
prev()
next()
eq()
first()
last()
is()
not()
children()
DEMO 10 : parent()
jQuery入門ガイド

機能的なセレクタ一覧

.find()
指定された条件に当てはまる要素を取得
.prev()
指定された条件に当てはまる要素の直前にある要素を取得
.next()
指定された条件に当てはまる要素の直後にある要素を取得
.eq()
指定された条件に当てはまるn番目の要素を取得
.first()
指定された条件に当てはまる要素の最初の要素を取得
.last()
指定された条件に当てはまる要素の最後の要素を取得
.is()
指定された条件と一致する要素を取得
.not()
指定された条件と一致しない要素を取得
.children()
指定された条件に当てはまる要素の子要素を取得
.parent()
指定された条件に当てはまる要素の親要素を取得

find()

公式ドキュメント : .find() | jQuery API Documentation

指定した条件「class『.demo1_target2』の要素」を取得する
選択した要素のclassを追加する

DEMO 01

find()のDEMO

HTML

[sourcecode lang="html"]
&lt;div class=&quot;demo01_target&quot;&gt;
	&lt;p class=&quot;demo01_target3&quot;&gt;古より伝わりし&lt;/p&gt;
	&lt;p class=&quot;demo01_target3&quot;&gt;黄昏の楽園から舞い降りた&lt;/p&gt;
	&lt;p class=&quot;demo01_target2&quot;&gt;闇の力を纏いし王の&lt;/p&gt;
	&lt;p class=&quot;demo01_target3&quot;&gt;光無き傀儡を従えし&lt;/p&gt;
	&lt;p class=&quot;demo01_target2&quot;&gt;としお&lt;/p&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="html"]

古より伝わりし

黄昏の楽園から舞い降りた

闇の力を纏いし王の

光無き傀儡を従えし

としお

</div>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$(function() {

    $('p').find('.demo01_target2').addClass('demo01_target4');

});
[/sourcecode]

[sourcecode lang="javascript"]

$(function() {

$('p').find('.demo01_target2').addClass('demo01_target4');

});

[/sourcecode]

prev()

公式ドキュメント : .prev() | jQuery API Documentation

指定した条件「class『demo2_target2』の要素」直前にある要素を取得する
選択した要素にclass「demo02_target3」を追加する

DEMO 02

prev()のDEMO

HTML

[sourcecode lang="html"]
&lt;div class=&quot;demo02_inner&quot;&gt;
	&lt;p class=&quot;demo02_target&quot;&gt;のぶなが&lt;br&gt;.demo02_target&lt;/p&gt;
	&lt;p class=&quot;demo02_target2&quot;&gt;みちこ&lt;br&gt;.demo02_target2&lt;/p&gt;
	&lt;p class=&quot;demo02_target&quot;&gt;よしむね&lt;br&gt;.demo02_target&lt;/p&gt;
	&lt;p class=&quot;demo02_target&quot;&gt;かげむしゃ&lt;br&gt;.demo02_target&lt;/p&gt;
	&lt;p class=&quot;demo02_target&quot;&gt;さえきさん&lt;br&gt;.demo02_target&lt;/p&gt;
	&lt;p class=&quot;demo02_target&quot;&gt;ごりら&lt;br&gt;.demo02_target&lt;/p&gt;
	&lt;p class=&quot;demo02_target&quot;&gt;おもち&lt;br&gt;.demo02_target&lt;/p&gt;
	&lt;p class=&quot;demo02_target2&quot;&gt;つとむ&lt;br&gt;.demo02_target2&lt;/p&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="html"]

のぶなが .demo02_target

みちこ .demo02_target2

よしむね .demo02_target

かげむしゃ .demo02_target

さえきさん .demo02_target

ごりら .demo02_target

おもち .demo02_target

つとむ .demo02_target2

</div>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$(function() {

    $('.demo02_target2').prev().addClass('demo02_target3');

});
[/sourcecode]

[sourcecode lang="javascript"]

$(function() {

$('.demo02_target2').prev().addClass('demo02_target3');

});

[/sourcecode]

next()

公式ドキュメント : .next() | jQuery API Documentation

指定した条件「class『demo03_target2』の要素」直後にある要素を取得する
選択した要素にclass「demo03_target3」を追加する

DEMO 03

next()のDEMO

HTML

[sourcecode lang="html"]
&lt;div class=&quot;demo03_inner&quot;&gt;
	&lt;p class=&quot;demo03_target2&quot;&gt;のぶなが&lt;br&gt;.demo03_target2&lt;/p&gt;
	&lt;p class=&quot;demo03_target&quot;&gt;みちこ&lt;br&gt;.demo03_target&lt;/p&gt;
	&lt;p class=&quot;demo03_target&quot;&gt;よしむね&lt;br&gt;.demo03_target&lt;/p&gt;
	&lt;p class=&quot;demo03_target&quot;&gt;かげむしゃ&lt;br&gt;.demo03_target&lt;/p&gt;
	&lt;p class=&quot;demo03_target&quot;&gt;さえきさん&lt;br&gt;.demo03_target&lt;/p&gt;
	&lt;p class=&quot;demo03_target&quot;&gt;ごりら&lt;br&gt;.demo03_target&lt;/p&gt;
	&lt;p class=&quot;demo03_target2&quot;&gt;おもち&lt;br&gt;.demo03_target2&lt;/p&gt;
	&lt;p class=&quot;demo03_target&quot;&gt;つとむ&lt;br&gt;.demo03_target&lt;/p&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="html"]

のぶなが .demo03_target2

みちこ .demo03_target

よしむね .demo03_target

かげむしゃ .demo03_target

さえきさん .demo03_target

ごりら .demo03_target

おもち .demo03_target2

つとむ .demo03_target

</div>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$(function() {

    $('.demo03_target2').next().addClass('demo03_target3');

});
[/sourcecode]

[sourcecode lang="javascript"]

$(function() {

$('.demo03_target2').next().addClass('demo03_target3');

});

[/sourcecode]

eq()

公式ドキュメント : .eq() | jQuery API Documentation

指定した条件「demo04_inner p」の7番目の要素を取得する
選択した要素にclass「demo04_target」を追加する

DEMO 04

eq()のDEMO

HTML

[sourcecode lang="html"]
&lt;div class=&quot;demo04_inner&quot;&gt;
	&lt;p&gt;01&lt;/p&gt;
	&lt;p&gt;02&lt;/p&gt;
	&lt;p&gt;03&lt;/p&gt;
	&lt;p&gt;04&lt;/p&gt;
	&lt;p&gt;05&lt;/p&gt;
	&lt;p&gt;06&lt;/p&gt;
	&lt;p&gt;07&lt;/p&gt;
	&lt;p&gt;08&lt;/p&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="html"]

01

02

03

04

05

06

07

08

</div>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$(function() {

	$('.demo04_inner p').eq(6).toggleClass('demo04_target');

});
[/sourcecode]

[sourcecode lang="javascript"]

$(function() {

$('.demo04_inner p').eq(6).toggleClass('demo04_target');

});

[/sourcecode]

first()

公式ドキュメント : .first() | jQuery API Documentation

指定した条件「demo05_inner p」の最初の要素を取得する
選択した要素にclass「demo05_target」を追加する

DEMO 05

first()のDEMO

HTML

[sourcecode lang="html"]
&lt;div class=&quot;demo05_inner&quot;&gt;
	&lt;p&gt;01&lt;/p&gt;
	&lt;p&gt;02&lt;/p&gt;
	&lt;p&gt;03&lt;/p&gt;
	&lt;p&gt;04&lt;/p&gt;
	&lt;p&gt;05&lt;/p&gt;
	&lt;p&gt;06&lt;/p&gt;
	&lt;p&gt;07&lt;/p&gt;
	&lt;p&gt;08&lt;/p&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="html"]

01

02

03

04

05

06

07

08

</div>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$(function() {

	$('.demo05_inner p').first().toggleClass('demo05_target');

});
[/sourcecode]

[sourcecode lang="javascript"]

$(function() {

$('.demo05_inner p').first().toggleClass('demo05_target');

});

[/sourcecode]

last()

公式ドキュメント : .last() | jQuery API Documentation

指定した条件「demo06_inner p」の最後の要素を取得する
選択した要素にclass「demo06_target」を追加する

last()のDEMO

DEMO 06

HTML

[sourcecode lang="html"]
&lt;div class=&quot;demo06_inner&quot;&gt;
	&lt;p&gt;01&lt;/p&gt;
	&lt;p&gt;02&lt;/p&gt;
	&lt;p&gt;03&lt;/p&gt;
	&lt;p&gt;04&lt;/p&gt;
	&lt;p&gt;05&lt;/p&gt;
	&lt;p&gt;06&lt;/p&gt;
	&lt;p&gt;07&lt;/p&gt;
	&lt;p&gt;08&lt;/p&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="html"]

01

02

03

04

05

06

07

08

</div>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$(function() {

	$('.demo06_inner p').last().toggleClass('demo06_target');

});
[/sourcecode]

[sourcecode lang="javascript"]

$(function() {

$('.demo06_inner p').last().toggleClass('demo06_target');

});

[/sourcecode]

is()

公式ドキュメント : .is() | jQuery API Documentation

指定した条件のclass「demo07_inner p:even」と一致する要素を取得する
選択した要素にclass「demo07_target」を追加する

DEMO 07

is()のDEMO

HTML

[sourcecode lang="html"]
&lt;div class=&quot;demo07_inner&quot;&gt;
	&lt;p&gt;01&lt;/p&gt;
	&lt;p&gt;02&lt;/p&gt;
	&lt;p&gt;03&lt;/p&gt;
	&lt;p&gt;04&lt;/p&gt;
	&lt;p&gt;05&lt;/p&gt;
	&lt;p&gt;06&lt;/p&gt;
	&lt;p&gt;07&lt;/p&gt;
	&lt;p&gt;08&lt;/p&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="html"]

01

02

03

04

05

06

07

08

</div>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$(function() {

	if($('.demo07_inner p').is($('.demo07_inner p:even'))) {
		$('.demo07_inner p:even').toggleClass('demo07_target');
	}

});
[/sourcecode]

[sourcecode lang="javascript"]

$(function() {

if($('.demo07_inner p').is($('.demo07_inner p:even'))) {

$('.demo07_inner p:even').toggleClass('demo07_target');

}

});

[/sourcecode]

not()

公式ドキュメント : .not() | jQuery API Documentation

指定した条件のclass「demo08_target」と一致しない要素を取得する
選択した要素にclass「demo08_target2」を追加する

DEMO 08

not()のDEMO

HTML

[sourcecode lang="html"]
&lt;div class=&quot;demo08_inner&quot;&gt;
	&lt;p&gt;01&lt;/p&gt;
	&lt;p&gt;02&lt;/p&gt;
	&lt;p class=&quot;demo08_target&quot;&gt;03&lt;/p&gt;
	&lt;p&gt;04&lt;/p&gt;
	&lt;p class=&quot;demo08_target&quot;&gt;05&lt;/p&gt;
	&lt;p&gt;06&lt;/p&gt;
	&lt;p&gt;07&lt;/p&gt;
	&lt;p&gt;08&lt;/p&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="html"]

01

02

03

04

05

06

07

08

</div>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$(function() {

	$('.demo08_inner p').not('.demo08_target').addClass('.demo08_target2');

});
[/sourcecode]

[sourcecode lang="javascript"]

$(function() {

$('.demo08_inner p').not('.demo08_target').addClass('.demo08_target2');

});

[/sourcecode]

children()

公式ドキュメント : .children() | jQuery API Documentation

class「demo09_trigger」の要素「ふふふ・・・」をクリックすると、「demo09_target p」要素の子要素(span)のclassを切り替える

DEMO 09

children()のDEMO

HTML

[sourcecode lang="html"]
&lt;button class=&quot;btn_trigger demo09_trigger&quot;&gt;ふふふ・・・&lt;/button&gt;
&lt;div class=&quot;demo09_inner&quot;&gt;
	&lt;div class=&quot;demo09_target&quot;&gt;
		&lt;p&gt;&lt;span&gt;01&lt;/span&gt;&lt;/p&gt;
		&lt;p&gt;&lt;span&gt;02&lt;/span&gt;&lt;/p&gt;
		&lt;p&gt;&lt;span&gt;03&lt;/span&gt;&lt;/p&gt;
		&lt;p&gt;&lt;span&gt;04&lt;/span&gt;&lt;/p&gt;
		&lt;p&gt;&lt;span&gt;05&lt;/span&gt;&lt;/p&gt;
		&lt;p&gt;&lt;span&gt;06&lt;/span&gt;&lt;/p&gt;
		&lt;p&gt;&lt;span&gt;07&lt;/span&gt;&lt;/p&gt;
		&lt;p&gt;&lt;span&gt;08&lt;/span&gt;&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="html"]

01

02

03

04

05

06

07

08

</div>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$(function() {

	$('.demo09_trigger').on('click', function() {
		$('.demo09_target p').children().toggleClass('demo09_target2');
	});

});
[/sourcecode]

[sourcecode lang="javascript"]

$(function() {

$('.demo09_trigger').on('click', function() {

$('.demo09_target p').children().toggleClass('demo09_target2');

});

[/sourcecode]

DEMO 10 : parent()

公式ドキュメント : .parent() | jQuery API Documentation

class「demo10_trigger」の要素「ぽちぽち」をクリックすると、「demo10_target」要素の親要素(class「demo10_inner」)にclass「demo10_target2」を追加する

DEMO 10

parent()のDEMO

HTML

[sourcecode lang="html"]
&lt;button class=&quot;btn_trigger demo10_trigger&quot;&gt;ぽちぽち&lt;/button&gt;
&lt;div class=&quot;demo10_inner&quot;&gt;
	class「demo10_inner」
	&lt;div class=&quot;demo10_target&quot;&gt;
		&lt;p&gt;class「demo10_target」&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="html"]

class「demo10_inner」

class「demo10_target」

</div>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$(function() {

	$('.demo10_trigger').on('click', function() {
		$('.demo10_target').parent().toggleClass('demo10_target2');
	});

});
[/sourcecode]