JavaScriptでページャーのデザイン変更

質問

ページャーをのデザインをJavaScriptで変更しようとしております。

現在ページャーは

「前へ　　1　2　3　4　5　6　　次へ」

という形のものです。これを

「前へ　　1/6　　次へ」

というデザインに変更したいのですが、ソースはシステムからはき出されるものが固定なので変更ができません。そのためJavaScriptで変更しようと考えております。
はき出されるソースは

<div class="pagenav">
<a href="#">前へ</a>
<span class="number">
<a href="#">1</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
</span>
<a href="#">次へ</a>
</div>

という感じのものです。今いるページにはclassが付きます。

これに対してjQueryで、

$(function(){
var now = $('.pagenav .number a.current').text();
var full = $('.pagenav .number a:last-child').text();
$('.number').append(now + '/' + full);
$('.number > a').remove();
});

という風に記述したところ、無事に希望とする形のページャーに変更ができました。
しかし問題が1つ発生し、ページ内に複数のページャー（ページの上部と下部など）があった場合に両方の数値を取得してしまい、

「前へ 22/66 次へ」

というような表示になってしまいました…
1つの括り（<div class="pagenav">）で処理を完結し、同じclass名の要素が複数あっても干渉しないようにする記述方法を教えてください。
よろしくお願いします。

回答No.1

gorusura

$(function(){
$('.pagenav').each(function(){
var number = this.children('.number') , children = number.children('a');
var now = children.filter('.current').text();
var full = children.filter(':last-child').text();
number.empty().append(now + '/' + full);
});
});

こういう感じでしょうか。

尚、無駄なことは避けて下さい。
.pagenav .number a.current → .pagenav > .number > a.current
.pagenav .number a:last-child → .pagenav > .number > a:last-child
.pagenav .number aが 二か所に出てきた → 変数に入れる

$('.number').append(now + '/' + full);
$('.number > a').remove();
→
$('.number').empty().append(now + '/' + full);

お礼

回答ありがとうございます！
なにぶんjQurtyを使いこなせていないので、childrenやfilterのそういう使い方は知りませんでした。勉強になります。

ただ、ソースを貼り付けてみてもページャーに変化が見られず、firebugではエラーが出ているようです…