jQuery の replace の質問です｡ input要素[ id="ajaxSave" ]で取得した値を､ul>li要素[ class="sortLink" ]の最後にあるﾊﾟﾗﾒｰﾀｰの[ &q= ]に4行ともｾｯﾄしようと考…

jQuery の replace の質問です｡

input要素[ id="ajaxSave" ]で取得した値を､ul>li要素[ class="sortLink" ]の最後にあるﾊﾟﾗﾒｰﾀｰの[ &q= ]に4行ともｾｯﾄしようと考えていますが､これまたうまくいきません｡
現在試しているｺｰﾄﾞは以下に添付しました｡

症状として､
ﾊﾟﾗﾒｰﾀｰのorderやdasortの値を変えて4種書いているのですが､以下のｺｰﾄﾞを試すと4行ともすべて1行目と同じURLになってしまいます｡
[ &q= ]の値はうまくｾｯﾄされていますが､4行とも以下URLになる｡
https://abc-com.ssl-xserver.jp/quiz/?fbid=1022&order=id&dasort=desc&q=xxx
つまり2行目も4行目も､orderはidに､dasortはdescになってしまうのです｡
どなたか以下を考慮し､他のul>li要素に干渉することなく､4行の[ &q= ]だけに[ id="ajaxSave" ]の値をｾｯﾄできるようｺｰﾄﾞの添削校正をよろしくお願いします｡

(1)[ &q= ]はSmartyから受け取った値がｾｯﾄされている場合もありますし空の場合もあります｡例､[ &q=13 ] [ &q=%83e%83X%83g ]
(2)[ &q= ]は後にもﾊﾟﾗﾒｰﾀｰが続く可能性があります｡例､[ &q=20&k=xxx ]

<!DOCTYPE html>
<html lang="ja">
<head>
 <{$content_type|smarty:nodefaults}>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript" src="../js/textchange/jquery.textchange.min.js"></script>
</head>

<body>
<span class="wrap">
 <input id="ajaxSave" type="text" name="qKey" value="<{$query}>" size="25">
</span>
<span id="ajaxFired" class="wrap"></span>
<ul>
 <li class="sortLink"><a href="./?fbid=<{$fb_id}>&order=id&dasort=desc&q=<{$query}>">ID▼</a></li>
 <li class="sortLink"><a href="./?fbid=<{$fb_id}>&order=id&dasort=asc&q=<{$query}>">ID▲</a></li>
 <li class="sortLink"><a href="./?fbid=<{$fb_id}>&order=mod&dasort=desc&q=<{$query}>">DATE▼</a></li>
 <li class="sortLink"><a href="./?fbid=<{$fb_id}>&order=mod&dasort=asc&q=<{$query}>">DATE▲</a></li>
</ul>
</body>

<script>
var timeout;
$('#ajaxSave').bind('textchange', function () {
 clearTimeout(timeout);
 $('#ajaxFired').html('Typing...');
 var self = this;
 timeout = setTimeout(function () {
 var sortLink = $('.sortLink a');
 var query = encodeURIComponent($("#ajaxSave").val()); 
 $('#ajaxFired').html('Saved: ' + $(self).val());
 sortLink.attr('href', sortLink.attr('href').replace(/&q=[^&]*/, '&q=' + query));
 }, 1000);
});
</script>

</html>

こんな感じです｡

var timeout;
$('#ajaxSave').bind('textchange', function () {
 clearTimeout(timeout);
 $('#ajaxFired').html('Typing...');
 var self = this;
 timeout = setTimeout(function () {
// var sortLink = $('.sortLink a');
 var query = encodeURIComponent($("#ajaxSave").val()); 
 $('#ajaxFired').html('Saved: ' + $(self).val());
// sortLink.attr('href', sortLink.attr('href').replace(/&q=[^&]*/, '&q=' + query));
 // ★こういうふうに変えました
 $('.sortLink a').each(function() {
 $(this).attr('href', $(this).attr('href').replace(/&q=[^&]*/, '&q=' + query));
 });
 }, 1000);
});

元のｺｰﾄﾞだと sortLink.attr('href', ...) は､第二引数の値を四つの A 要素にｾｯﾄしますが､指定している値はひとつだけです｡

.attr()
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
http://api.jquery.com/attr/

あ､ﾏﾆｭｱﾙを見てて気がついた｡こういうふうにも書けます｡

<script>
var timeout;
$('#ajaxSave').bind('textchange', function () {
 clearTimeout(timeout);
 $('#ajaxFired').html('Typing...');
 var self = this;
 timeout = setTimeout(function () {
 var sortLink = $('.sortLink a');
 var query = encodeURIComponent($("#ajaxSave").val()); 
 $('#ajaxFired').html('Saved: ' + $(self).val());
// sortLink.attr('href', sortLink.attr('href').replace(/&q=[^&]*/, '&q=' + query));
 // ★こんなふうにも書けました
 sortLink.attr('href', function(i, val) {
 return val.replace(/&q=[^&]*/, '&q=' + query);
 });
 }, 1000);
});