フォントサイズの変更

jqueryを使用したフォントサイズの変更について質問です。
サイズの変更は以下のスクリプトで動作するのですがクラス名(active)が付与されずうまく動作しません。

html
<ul class="switch">
<li><span class="fontChangeSmall">小</span></li>
<li><span class="fontChangeNormal">中</span></li>
<li><span class="fontChangeLarge">大</span></li>
</ul>

font-change.js
$(document).ready(function() {
var bodyClass = 'font';
var switchClass = 'fontChange';
var startClass = 'Normal';
var activeClass = 'active';
var value = $.cookie('fontSize');

if ( value ) {
$('body').addClass(bodyClass + value);
$('.switch .' + switchClass + value).addClass(activeClass);
} else {
$('body').addClass(bodyClass + startClass);
$('.switch .' + switchClass + startClass).addClass(activeClass);
}

$('.switch span').click( function() {

value = $(this).attr('class').replace(switchClass, '');

$('body').removeClass(bodyClass + 'Normal').removeClass(bodyClass + 'Small').removeClass(bodyClass + 'Large');

$('body').addClass(bodyClass + value);
$('.switch span').removeClass(activeClass);

$('.switch .' + switchClass + value).addClass(activeClass);

$.cookie('fontSize', value);

});
});

上記だけであれば動作するのですが下記のスクリプトがあるとactiveが付与されない状況です。
下記をコメントすると正常に動作します。
※どちらのjsも外部ファイルとして読込みしてます。

common.js
$(function() {
$('body :first-child').addClass('firstChild');
$('body :last-child').addClass('lastChild');
});

どのようにすればactiveが付与されるようになりますでしょうか？

No.1 回答者： fujillin 回答日時： 2009/10/13 20:02

jqueryはよく知りませんが、

擬似クラスの指定は :first、:lastで「-child」は付いてないと思うけれど、それも通じるのかな？
文字のサイズ設定はbody要素に対して行っているので、個別の要素にサイズ指定を行っていればそちらの方が優先されるはず。
body:first、body:lastでクラスを付与しているので、そのクラスで文字サイズを固定していれば、クリックしてもその要素は対象外になる。
全体に適用させたければ、個別要素にサイズ指定をするのをやめればよいのでは？

ちょっと試した範囲では、:first、:lastなどはHTMLの改行でTextがあったりすると、要素をとらなかったりするみたいなので、HTMLの記述にもちょっと注意してみた方が良いかも。（何をとっているかまでは未確認）

この回答への補足

お返事ありがとうございます。
私の知識不足でわからないのですが具体的にどうすればいいのでしょうか？
ちなみに上記の状態でフォントサイズの変更はできています。
うまくいかないという箇所はa要素にクラス(active)属性が付与されないだけという事です。

補足日時：2009/10/13 22:03

No.2 回答者： imq 回答日時： 2009/10/14 19:57

font-change.jsだけなら動くと思います。

common.jsの方で、擬似クラスなのにselectorがないのが致命的で、
これが原因でまともな動作をしないと思います。

ちなみにfirst-childは「初めの子要素」と勘違いしがちですが、
selectorで選択された中で初めの要素です。


bodyの子要素で最初のものを取り出すなら、

$('body>*:first-child')

としてみてください。

この回答への補足

追記です。
$('ul>li:first-child').addClass('firstChild');
$('ul>li:last-child').addClass('lastChild');
としたところ動作するようになりました。このほかにもdlやdiv等擬似クラスを付与する場合には
ひたすら同様に記述するしか方法はないですか？
まとめて記述する方法がありましたら教えてください。

補足日時：2009/10/14 20:24

この回答へのお礼

お返事ありがとうございます。
>ちなみにfirst-childは「初めの子要素」と勘違いしがちですが・・・
まさにその通りだったのですが基本的にはbodyの子要素ではなくcssの設定が主な利用目的で
ulやdl等コーディング部分に深く関わります。例えば以下のような感じです

li.firstChild{ margin-bottom: 1em; }
li.lastChild { margin-bottom: 0; }

$('body>*:first-child')に変えたところ$('body :last-child')をコメントすると正常に
動作するのですが最初のdivにしかfirstChildが付与されず当初の使用目的に反します。

上記のような使用目的の場合にはどのように書くのが正しいのでしょうか？

お礼日時：2009/10/14 20:14

No.3 ベストアンサー 回答者： imq 回答日時： 2009/10/15 00:05

＞まとめて記述する方法がありましたら教えてください。

カンマで区切ればいいと思います。
$('ul>li:first-child,dd>dl:first-child').addClass('firstChild');


他には、classNameを付けないでCSSだけで書いてみるとか
ul>li:firstChild{ margin-bottom: 1em; }

IE6・7用のハックで、
ul li.first-child {
color:#f0f;
}

ul li {
_behavior: expression(
this.className += this.previousSibling ? ' first-child' : '',
this.style.behavior = 'none'
);
}

↑liの下に別のulがあると、動作がおかしくなります。


ただ、ソースを見る限り、要素を動的に変更しているわけでもなさそうなので、
class="firstChild"とclass="lastChild"をHTMLに記述するのが良さそうな気もします。

No.4 回答者： imq 回答日時： 2009/10/15 00:08

前の回答に間違いがありました。

ul li.first-child {
color:#f0f;
}

ではなくて、

ul li.first-child { margin-bottom: 1em; }

です。