Re:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

ネタ元:初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips : アシアルブログ

ちょっと気になるコードがあるのでツッコミを。

1.現在見ているページのナビゲーションをアクティブにする

if (document.URL.indexOf("001.html") != -1) {
	$("nav a.top").toggleClass("on");
} else if (document.URL.indexOf("002.html") != -1){
	$("nav a.list").toggleClass("on");
}

class属性の付加にtoggleClass()を利用しているけどaddClass()のほうがシンプルでよいです。

if (document.URL.indexOf("001.html") != -1) {
	$("nav a.top").addClass("on");
} else if (document.URL.indexOf("002.html") != -1){
	$("nav a.list").addClass("on");
}


2.liの中身がない場合、その上位要素のulごと表示をしない

if($("ul.class1 li").size()=="0") {
	$("ul.class1").hide().parent().append("ここに<ul>がありました");;
}
if($("ul.class2 li").size()=="0") {
	$("ul.class2").hide().parent().append("ここに<ul>がありました");
}

size()はjQuery 1.8 から非推奨なのでlengthを使いましょう。あと、このままだと同じクラス名が複数ある(たとえばul.class1がページ内に数カ所ある)と全部に対して同じ処理を行ってしましますのでeach()で個別に処理を行ったほうが安全かも。

$("ul.class1,ul.class2").each(function(){
	if($(this).find("li").length===0){
		$(this).hide().parent().append("ここに<ul>がありました");
	}
});


3.ある文字列を含む要素を強制非表示/内容を変更する

$("a:contains('ニセモノ')").hide();
$("a:contains('バケモノ')").text("オバケモノ").css('background', '#000').css('color', '#FFF');

css()は何回にもわけずに1回で書いたほうがキレイです。

$("a:contains('ニセモノ')").hide();
$("a:contains('バケモノ')").text("オバケモノ").css({
	'background':'#000',
	'color':'#FFF'
});


4.ユーザーエージェントによって表現を変える

if(navigator.userAgent.indexOf("Chrome") != -1) {
	 $("a:contains('Chrome')").toggleClass("on");
} else if(navigator.userAgent.indexOf("Firefox") != -1) {
 	$("a:contains('Firefox')").toggleClass("on");
} else if(navigator.userAgent.indexOf("Safari") != -1) {
	$("a:contains('Safari')").toggleClass("on");
} else {
	$("a:contains('Other')").toggleClass("on");
}

1と同じくtoggleClass()ではなくてaddClass()で。classを付けるためにtoggleClass()を使うと後でコードを触る人に意図が伝わりにくいです。

if(navigator.userAgent.indexOf("Chrome") !== -1) {
	 $("a:contains('Chrome')").addClass("on");
} else if(navigator.userAgent.addOf("Firefox") !== -1) {
 	$("a:contains('Firefox')").addClass("on");
} else if(navigator.userAgent.indexOf("Safari") !== -1) {
	$("a:contains('Safari')").addClass("on");
} else {
	$("a:contains('Other')").addClass("on");
}

特にネタ元のコードが悪いというわけではないですが、少し規模が大きくなると混乱を招きやすかなと思います。こういった書き方もあるんだと心の片隅に覚えておいてください。

関連エントリー

jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
14のjQueryベストプラクティス
8のjQueryのすごいTIPS
jQueryのコードを良くする5つのTIPS

スポンサードリンク

«jQuery 2.0を利用するために注意すること | メイン | CSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」が終了しました»