jQueryに関する基本的なメモ・スニペットです。
Contents
要素に連番付きのclass/idを追加する
例えば、li要素に連番付きのclassを追加したい場合、.addClass()を使用して、下記のように記述すると各li要素に「list1、list2、list3...」というclassを追加することができます。
$('ul li').each(function(i) {
$(this).addClass('list' + (i + 1));
});idを追加したい場合は、.attr()を使用してあげると追加することができます。
$('ul li').each(function(i) {
$(this).attr('id', 'list' + (i + 1));
});class/idの有無を判定する
特定のclassがあるかどうかの判定は.hasClass()を使用します。
下記は、ulに「acorn」というclassがあるかどうかを判定し、「classがある場合は以下の処理を実行する」というようなことを実装したい場合の記述方法です。
$('ul').each(function() {
if ($(this).hasClass('acorn')) {
// .acornというclassがあった時の処理
}
});idの場合は、.attr()を使用して、下記のように記述します。
$('ul').each(function() {
if ($(this).attr('id') == 'acorn') {
// .acornというidがあった時の処理
}
});外部リンクにtarget="_blank"を付加する
外部リンクを自動で判別して、target="_blank"を付与してくれるように設定する方法です。
$('a[href^=http]').not('[href*="'+location.hostname+'"]').attr('target', '_blank');外部リンクと分かるように別窓のアイコン等を挿入したい場合、CSSで以下のように記述すれば設定できます。
a[target="_blank"] {
/* styleを指定 */
}拡張子別にアイコンを設定する方法
その他、拡張子で判断してアイコンを表示したい場合は以下のように設定すれば、それぞれ別のアイコンが指定できます。
a[href$=".xls"], a[href$=".xlsx"] {
/* Excelアイコンを指定 */
}
a[href$=".doc"], a[href$=".docx"] {
/* Wordアイコンを指定 */
}
a[href$=".pdf"] {
/* PDFアイコンを指定 */
}
a[href$=".zip"] {
/* ZIPアイコンを指定 */
}フラグ判定
フラグ判定は、あらかじめ用意したフラグ（変数）がtrueかfalseかを判定し、処理を分けたい時に使用します。
true/falseで判定
以下は、変数flagにtrueを初期値として設定しています（trueとする代わりに「１」と書く場合もありますが意味は同じです。同様にfalseを「0」とする場合もあります。）。
そして、buttonがクリックされた際に、条件分岐を利用して別の処理を設定・実行できるようにしています。console.logを見てみるとクリックされるたびに「ture」と「false」が交互に表示されるのが確認できるかと思います。
var flag = true; // flag = 1; と同じ
$('button').on('click', function() {
if (flag) {
// flagがtrueの時の処理
console.log('ture');
flag = false; // flag = 0; と同じ
} else {
console.log('false');
// flagがfalseの時の処理
flag = true; // flag = 1; と同じ
}
});classの有無で判定
.hasClass()を使用して、特定の要素に特定のclassが付いているかで判定することもできます。
var flagClass = 'is-ture';
$('button').on('click', function() {
if ($(this).hasClass(flagClass)) { // classが付いているか判定
console.log('is-ture');
$(this).removeClass(flagClass);
} else {
console.log('is-false');
$(this).addClass(flagClass);
}
});要素の表示・非表示
特定の要素が表示されているかどうかで判定することもできます。
以下は、特定の要素がdisplay: blockで表示されているなら「ture」、display: none;で非表示の場合は「false」として、判定処理を行っています。
var $flagElements = $('.selector')
$('button').on('click', function () {
if ($flagElements.css('display') == 'block') { // 表示されているか判定
console.log('true');
$flagElements.hide();
} else {
console.log('false');
$flagElements.show();
}
});