jQuery Snippets #8

  • Posted on
  • Category : Tips
jQuery Snippets #8

基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストです。書いている内容に対して「もっとスマートにできる」とか「そもそも間違ってる」みたいなのがあれば、ツッコミ大歓迎なのでコメントなど通じて是非教えてください。

動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか、CodePenJSFiddleなどを利用して確認してください。

jQuery Snippets #8 目次

  1. 擬似要素のCSSを変更する #1
  2. 擬似要素のCSSを変更する #2
  3. タブ切り替え:別ページから遷移した時に特定のタブを開いた状態にする
  4. テキストを1文字ずつ任意のタグで括る
  5. テキストを1文字ずつ任意のタグで括る -番号付きクラスを付ける-
  6. テキストを1文字ずつ表示させる
  7. ページ最下部にスクロールさせる
  8. ページ表示後に特定の箇所へスクロールさせる
  9. サムネイルをクリックして、メインイメージを切り替える
  10. iframeをリロードする

1. 擬似要素のCSSを変更する #1

jQueryを使えば指定した要素のスタイルを変更することは簡単にできますが、その指定した要素の::before::afterといった擬似要素のスタイルを変更したいとなると、例えば$('element::before').css('color', 'red');のように記述しても非DOMのためにスタイルは変更できません。
それをどうにかしてjQueryを利用して擬似要素のスタイルを変更したいという場合は、ひとつの方法としてまず要素に.addClass()等でクラスを付与し、それを利用して擬似要素のスタイルを変更するという方法があります。

以下は例としてボタンをクリックすると要素に「is-active」というクラスがpに付与されるというもので、あとはCSSであらかじめp.is-activeの擬似要素に対してのスタイルを記述しておけば、結果的にjQueryを利用して擬似要素のスタイルが変化するように見せることができます。

jQuery

$('button').on('click', function() {
	$('p').addClass('is-active');
});

CSS

p::before {
	content: '★';
}
p.is-active::before {
	color: red;
}

目次へ

2. 擬似要素のCSSを変更する #2

同じくjQueryを利用して::before::afterといった擬似要素のスタイルを変更する方法で、こちらは直接head内にstyleを記述してしまうというものになります。

以下は例としてボタンをクリックするとheadstyleが追加されるというもので、追加されるstyle内にはp::beforeへのスタイルを記述しておきます。

jQuery

$('button').on('click', function() {
	$('head').append('<style>p::before { color: red; } </style>');
});

目次へ

3. 別ページから遷移した時に特定のタブを開いた状態にする

以前「10. タブ切り替え – jQuery Snippets #1」で紹介したjQueryを利用したタブ切り替えコンテンツの応用版で、以前紹介した方法だとハッシュ付きでリンク設定したとしても最初のタブが表示される状態のみですが、以下のように記述することで別ページから遷移してきたとしても特定のタブが開かれている状態にすることができます。

例えば<a href="example.html#tab2">tab 2を開いた状態にしたリンク</a>という形でリンクを指定した場合は「example.htmlにページ遷移して且つtab 2が初期表示で開いた状態」になります。

また、通常のページ遷移の場合はそのまま最初のタブが開かれている状態になっています。

HTML

<ul class="tab-nav">
	<li><a href="#tab1">tab 1</a></li>
	<li><a href="#tab2">tab 2</a></li>
	<li><a href="#tab3">tab 3</a></li>
</ul>
<div id="tab1" class="tab-contents">
	tab1 contents ...
</div>
<div id="tab2" class="tab-contents">
	tab2 contents ...
</div>
<div id="tab3" class="tab-contents">
	tab3 contents ...
</div>

jQuery

var hash = location.hash,
    $tabNav = $('.tab-nav li'),
    $tabContents = $('.tab-contents'),
    activeClass = 'is-active';

if ( hash ) {
	var hash = (hash.match(/^#tab\d+$/) || [])[0],
	    tabNumber = hash.slice(4) - 1;
	$tabNav.eq(tabNumber).addClass(activeClass).show();
	$tabContents.not(hash).hide();
} else {
	$tabNav.parent().find(':first').addClass(activeClass).show();
	$tabContents.not(':first').hide();
}
$tabNav.find('a').on('click', function() {
	$tabNav.removeClass(activeClass);
	$(this).parent().addClass(activeClass);
	$tabContents.hide();
	$($(this).attr('href')).show();
	return false;
});

目次へ

4. テキストを1文字ずつ任意のタグで括る

jQueryを使ってテキストを1文字ずつ任意のタグで括る方法です。
以下はp要素内にある各テキストをspanで括るという動きのもので、タグを変更したい場合は赤文字表示している箇所を任意のタグに変更してください。

jQuery

$('p').children().addBack().contents().each(function() {
	if ( this.nodeType == 3 ) {
		$(this).replaceWith($(this).text().replace(/(\S)/g, '<span>$1</span>'));
	}
});

もちろんタグで括るだけでなく、以下のようにすればクラス付きのタグで括るということも可能です。
サンプルソースは同じくp要素に対して実装しているもので、各p要素内にあるテキストがそれぞれ「split-text」というクラス付きのspanタグで括られるというものになります。

jQuery

$('p').children().addBack().contents().each(function() {
	if ( this.nodeType == 3 ) {
		$(this).replaceWith($(this).text().replace(/(\S)/g, '<span class="split-text">$1</span>'));
	}
});

目次へ

5. テキストを1文字ずつ任意のタグで括る -番号付きクラスを付ける-

上の方法でテキストを1文字ずつ任意のクラス付きのタグで括ることはできますが、何らかの理由でそこへさらに番号を付けたいという時は以下のように記述することで実装できます。

jQuery

$('p').children().addBack().contents().each(function() {
	if ( this.nodeType == 3 ) {
		$(this).replaceWith($(this).text().replace(/(\S)/g, '<span class="split-text">$1</span>'));
	}
});
$('.split-text').each(function(i) {
	i = i+1;
	$(this).addClass('split-text' + i);
});

まず各p要素内のテキストを1文字ずつ「split-text」というクラス付きのspan要素で括り、その後そのspan class="split-text"に対して番号を付けるという動きになり、それぞれにsplit-text split-text1, split-text split-text2, split-text split-text3 … という感じで番号付きクラスが付与されます。

上記でそれぞれに番号付きクラスを付与しましたが、この場合は単純に上から順に番号を付けているだけなので、例えば複数のp要素がある場合に2つ目以降のp要素は1文字目だからといってsplit-text split-text1というクラスが付与されるわけではありません。
これをできれば各要素毎で1からちゃんと番号が始まるようにクラス付与させたい場合は、以下のように記述することで実装できます。

jQuery

$('p').children().addBack().contents().each(function() {
	if ( this.nodeType == 3 ) {
		$(this).replaceWith($(this).text().replace(/(\S)/g, '<span class="split-text">$1</span>'));
	}
});
$('p').each(function() {
	$(this).find('.split-text').each(function(i) {
		i = i+1;
		$(this).addClass('split-text' + i);
	});
});

目次へ

6. テキストを1文字ずつ表示させる

今であればCSSでアニメーションなど実装することも容易になったので、上で紹介した方法にCSSを組み合わせるということでも表現可能ですが、それをjQueryのみでやるという時は以下のように記述することで実装できます。
以下はp要素内にあるテキストが1文字ずつフェードインで表示されるというもので、表示の感じを変更したければ.delay().animate()内の数値を調整するなどしてください。

jQuery

$('p').children().addBack().contents().each(function() {
	if ( this.nodeType == 3 ) {
		$(this).replaceWith($(this).text().replace(/(\S)/g, '<span class="split-text">$1</span>'));
	}
});
$('.split-text').css('opacity', 0);
$('.split-text').each(function(i) {
	$(this).delay(i*50).animate({'opacity': 1}, 500);
});

ちなみに、フェードのエフェクトは必要ないのであれば基本的には上と同じコードを使用しつつ.animate()durationの値を0にすれば簡単に切ることができます。

jQuery

$('.split-text').each(function(i) {
	$(this).delay(i*50).animate({'opacity': 1}, 0);
});

目次へ

7. ページ最下部にスクロールさせる

よく見かけるのはページ上部にスクロールさせるというものですが、それとは逆にページ最下部にスクロールさせる動きを実装する方法です。
また、.animate()durationの値を0にすることでアクセス直後にページ最下部にいるという動きを実装することもできます。

jQuery

$('html, body').animate({ scrollTop: $(document).height() }, 1000, 'linear');

目次へ

8. ページ表示後に特定の箇所へスクロールさせる

同じくページスクロールに関する小ネタで、こちらはページ表示後に特定の箇所へスクロールさせるというものになります。
以下のように記述することでページ表示後に$('#target')の部分に指定した要素までスクロールされるようになり、もう少し時間をあけてからスクロールさせたいという時は.delay()の値を変更すれば調整できます。

jQuery

var targetPosition = $('#target').offset().top;
$('html, body').delay(500).animate({ scrollTop: targetPosition }, 1000, 'linear');

目次へ

9. サムネイルをクリックして、メインイメージを切り替える

イメージ切り替え時にエフェクトをつけたいとかオートやループ処理も実装したいなど、いろいろやりたい場合はプラグインを利用するなどした方が手っ取り早いですが、簡易的なものでよければ以下で実装できます。

HTML

<div class="image">
	<img src="img01.jpg">
</div>
<ul class="thumbnail">
	<li><a href="img01.jpg"><img src="thumbnail01.jpg"></a></li>
	<li><a href="img02.jpg"><img src="thumbnail02.jpg"></a></li>
	<li><a href="img03.jpg"><img src="thumbnail03.jpg"></a></li>
</ul>

jQuery

var $image = $('.image img'),
    $thumbnail = $('.thumbnail li'),
    activeClass = 'is-active';

$thumbnail.first().addClass(activeClass);
$thumbnail.find('a').on('click', function() {
	$thumbnail.removeClass(activeClass);
	$(this).parent().addClass(activeClass);
	$image.attr('src', $(this).attr('href'));
	return false;
});

動きとしては.thumbnail内にあるa要素のhrefにそれぞれメインイメージで表示(切り替え)させたいイメージへのパスを指定しておき、a要素をクリックするとその要素のhrefattr()で取得、あとはメインイメージのsrcを先ほど取得したものに差し替えるというものになります。
また、サムネイル部分には現在選択されているもの(クリックしたもの)にクラスを付与するようにしており、これを利用してCSSでスタイルをつければ現在どのサムネイルが選択されているのかをわかりやすくすることができます。

ここではサムネイルをクリックする動きで紹介していますが、少し記述を変更すればホバーした時に差し替える動きにもできます。

目次へ

10. iframeをリロードする

ネイティブでも短い記述で実装は可能ですが、jQueryの場合は以下のような記述で実装できます。

jQuery

$('iframe').attr('src', $('iframe').attr('src'));

見たままですが、attr()を利用してiframesrcを取得しつつ書き換えを行うことで、iframeがリロードされているように見せるものになります。

目次へ

上記以外のjQuery Snippetsに関しては下記ページにまとめているので、興味ある方はこちらもご覧ください。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。