ajaxで読み込んだ複数ページのURLをhrefに代入したい

前提・実現したいこと

ajaxで複数ページをよみこんで、リンクつきページリストを作成したい。
作りたいイメージ

test.html

<ul class="content">
<li><a href="AA.html">Aのショップ名</a></li>
<li><a href="BB.html">Bのショップ名</a></li>
<li><a href="CC.html">Cのショップ名</a></li>
</ul>

ajaxには詳しくなくて、いろいろ試してみているのですがうまくいきません。

発生している問題

ページを読み込んでいる先のURLができず、実装しているページのurlが表示されてしまいます。

test.html

<ul class="content">
<li><a href="http://○○○/test.html">Aのショップ名</a></li>
<li><a href="http://○○○/test.html">Bのショップ名</a></li>
<li><a href="http://○○○/test.html">Cのショップ名</a></li>
</ul>

該当のソースコード

$(document).ready(function () {
	// URLを指定
	var urls= ['AA.html','BB.html','CC.html'];
	for ( var x =0; x < urls.length; ++x ){
		$.ajax({
			url: urls[x],
			dataType: 'html',
			success: function(html) { // 成功した場合
				var blog_entries = '';
				//名前を変数に代入
				var shop_name = $(html).find('.shopName').text();
				
				//表示用のレイアウトを作成
				blog_entries = $('<li><a href="'+ url +'">' + shop_name +'</a></li>');

				$('ul.content').append(blog_entries);
			},
		error: function() { //エラー表示
				$('ul.content').append('<li>読み込みが出来ませんでした。</li>');
			}
		});
	}
});

読み込んでいる先のページ（AA.htmlなど）で、document.URLで取得したページURLを出力して、それを取得することも試してみたのですが、何も取得できませんでした。
何卒よろしくご教示ください。

行動規範の内容に同意します

回答2件

ベストアンサー

<a> には "AA.html" 等を与えたい、ということだと思います。

blog_entries = $('<li><a href="'+ url +'">' + shop_name +'</a></li>'); とありますが、ここで参照される url という変数がどこにも宣言されていません。
それでなぜ test.html が入るのかは謎ですが、 urls[x] を url にバインドする必要はあるはずです。

ちなみにご提示のコードでハマりがちな罠として、「var で宣言されたループ変数をその内部で（非同期に）使う場合、ループが終わった後に参照することになるので常に最後の数字になる」というのがあります。
かつては

javascript
1var lis = document.getElementsByTagName('li');
2
3for (var i = 0, len = lis.length; i < len; ++i) {
4  // ここからクロージャ
5  (function (n) {
6    lis[n].onclick = function () {
7      console.log(n);
8    };
9  }(i));
10  // ここまで
11}