TopJavaScriptjQuery > 2012年8月
2012年8月21日

jQueryでセレクタを複数指定する方法

August 21,2012 12:03 AM
Tag:[]
Permalink

ご存知の方も多いと思いますが、jQueryでセレクタを複数指定する方法を紹介します。

1.セレクタを複数指定する

jQueryでセレクタを複数指定するには、セレクタを次のようにカンマで区切ります。

HTML

<h1>foo</h1>
<h2>bar</h2>
<h3>hoge</h3>

jQuery

$('h1, h2, h3').css('font-size','20px');

適用前
適用前

適用後
適用後

セレクタには、要素セレクタ・IDセレクタ・classセレクタなど、異なる種類のものを設定することももちろんできます。

HTML

<div id="foo">
  <p>aaa</p>
</div>
<div>
  <p class="hoge">bbb</p>
</div>
<div id="bar">
  <p>aaa<span>bbb</span>ccc</p>
</div>

jQuery

$('#foo, .hoge, span').css('color','#f00');

適用前
適用前

適用後
適用後

上記の例はあまりよくありませんが、次のように何かをまとめて処理したい場合にすっきりするのではないでしょうか。

変更前

$('button').click(function(){
    $('#progressbar').show();
    $('.message').show();
    $('#overlay').show();
}

変更後

$('button').click(function(){
    $('#progressbar, .message, #overlay').show();
}

2.指定したセレクタがない場合

指定したセレクタが存在しない場合、単一のセレクタを指定した場合と同様、エラーとなることはありません。

Comments [0] | Trackbacks [0]
2012年8月10日

JavaScriptの文字列置換とjQueryのDOM要素置換のまとめ

August 10,2012 2:34 AM
Tag:[, ]
Permalink

JavaScriptの文字列置換とjQueryのDOM要素置換について、まとめて紹介します。

特にJavaScriptの文字列置換はいつもやり方を忘れてしまうので、このエントリーに保存しておきます。

1.replace()による文字列置換

基本的な文字列置換は、JavaScriptのreplace()メソッドを利用します。

var text = "foofoo";
var result = text.replace('foo', 'bar');

実行結果(resultの内容)

barfoo

2.replace()の正規表現による置換

replace()メソッドの第1パラメータに正規表現を指定すれば、さらに強力な文字列置換が行えます。

var text = "foofoo";
var result = text.replace(/foo/g, 'bar');

実行結果(resultの内容)

barbar

後方参照やグループ化なども可能です。

<script>
var text = "abcfooabc";
var result = text.replace(/^(.*)foo(.*)$/, '$1$2');
</script>

実行結果(resultの内容)

abcabc

3.jQueryのreplaceWith()によるDOM要素置換1

jQueryのreplaceWith()メソッドを使えば、例えば次のようなDOM要素の置換が行えます。

<div>foo</div>
<script>
$(function(){
    $('div').replaceWith('<div>bar</div>');
});
</script>

実行後のHTMLマークアップ

<div>bar</div>

4.jQueryのreplaceWith()によるDOM要素置換2

replaceWith()メソッドのパラメータに関数を定義すれば、次のようなDOM要素の置換が行えます。

<div class="container">
  <div class="inner">foo</div>
  <div class="inner">bar</div>
</div>
<script>
$(function(){
    $("div.container").replaceWith(function() {
        return $(this).contents();
    });
});
</script>

実行後のHTMLマークアップ

<div class="inner">foo</div>
<div class="inner">bar</div>

5.jQueryのreplaceAll()によるDOM要素置換

replaceAll()メソッドは、replaceWith()メソッドと逆の指定を行います。replaceAll()メソッドのパラメータにターゲットの要素やclass属性を指定し、置換する内容を先頭に記述します。

<div>foo</div>
<script>
$(function(){
    $('<div>bar</div>').replaceAll('div');
});
</script>

実行後のHTMLマークアップ

<div>bar</div>

次のように記述すれば、class属性値「third」のマークアップを、class属性値「first」のマークアップに置き換え、class属性値「first」の元のマークアップは消去されます。

<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">Goodbye</div>
<script>
$(function(){
    $('.first').replaceAll('.third');
});
</script>

実行後のHTMLマークアップ

<div class="second">And</div>
<div class="first">Hello</div>

6.参考サイト

参考サイトは下記です。ありがとうございました。

Comments [0] | Trackbacks [0]
2012年8月 3日

jQueryで要素の表示・非表示を判定する方法

August 3,2012 1:23 AM
Tag:[]
Permalink

jQueryの要素の表示・非表示を判定する方法を紹介します。

1.基本

jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。

show()は指定した要素を表示します。

$('#foo').show();

hide()は指定した要素を非表示にします。

$('#foo').hide();

が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。

2.css('display')で判定する

show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。

if ($('#foo').css('display') == 'block') {
    // 表示されている場合の処理
} else {
    // 非表示の場合の処理
}

3.is(':visible')で判定する

「:visible」は表示されている要素を抽出するためのもので、これとis()を組み合わせて利用します。

if ($('#foo').is(':visible')) {
    // 表示されている場合の処理
} else {
    // 非表示の場合の処理
}

4.is(':hidden')で判定する

「:hidden」は「:visible」と逆に、表示されていない要素を抽出するためのもので、これとis()を組み合わせて利用します。

if ($('#foo').is(':hidden')) {
    // 非表示の場合の処理
} else {
    // 表示されている場合の処理
}

5.プラグインを利用する

次のプラグインをコード内に記述しておけば、上記の方法よりパフォーマンスが向上するようです。

$.fn.isVisible = function() {
    return $.expr.filters.visible(this[0]);
};

プラグインは次のように利用します。

if ($('#foo').isVisible()) {
    // 表示されている場合の処理
} else {
    // 非表示の場合の処理
}

このプラグインは下記に掲載されているものです。

jQuery visibility test
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3