JQuery：URLリストのリンク先の一部をloadで拾って表示させたい

Question

URLリストのリンク先の一部をloadで拾って表示させたいのですが、
まず値の取得からうまく行かずに進みませんでした。。。

やりたいことは下記の２点です。
１．各aタグのhrefを読み込んでリンク先のURLをloadで読込
２．読込結果を</a>の後ろにそれぞれ対応するものを出力

###イメージしているコード（動きません）

<ul class="checkBoxListLink">
   <li><a href="/?hoge=&year=1">1年以内</a></li>
   <li><a href="/?hoge=&year=2">2年以内</a></li>
   <li><a href="/?hoge=&year=3">3年以内</a></li>
</ul>
<script type="text/javascript">
$(".checkBoxListLink > li > a").each(function(i) {
    var url = $(".checkBoxListLink > li > a").attr("href");//urlを変数に入れる
    $(".checkBoxListLink > li > a").load(url + "#sort_val");//load先から一部を抜き出して</a>の前に出力
});
</script>

###テスト1 addClassはイメージどおりに反映される（成功）
のでセレクタはあっていると思います。

<ul class="checkBoxListLink">
   <li><a href="/?hoge=&year=1">1年以内</a></li>
   <li><a href="/?hoge=&year=2">2年以内</a></li>
   <li><a href="/?hoge=&year=3">3年以内</a></li>
</ul>

<script type="text/javascript">
   $(".checkBoxListLink > li > a").addClass("addClass");
</script>

出力結果

<ul class="checkBoxListLink">

<li><a href="/?year=1" class="addClass">1年以内</a></li> <li><a href="/?year=2" class="addClass">2年以内</a></li> <li><a href="/?year=3" class="addClass">3年以内</a></li> </ul>

###テスト2 loadでリンク先の一部を取得（成功）

<script type="text/javascript">
   $("#read").load("/?year=1 #sort_val");
</script>
<div id="read"></div>

出力結果

<div id="read"><p>10件</p></div>

Answer 1

1. .loadは指定した要素にサーバーから受信した情報を読み込むメソッドです。質問にある通り、liにappendする等の動作をしたい場合は、予めDOMを用意してそのDOMのloadを使用してください。

2. .eachの中で再度セレクタを使用してアクセスしていますが、この場合、該当した全てのaタグでloadが実行されますので、最後の結果しか残りません。.eachの中であれば、$(this)で良いと思います。

<ul class="checkBoxListLink">
   <li><a href="/?hoge=&year=1">1年以内</a><span></span></li>
   <li><a href="/?hoge=&year=2">2年以内</a><span></span></li>
   <li><a href="/?hoge=&year=3">3年以内</a><span></span></li>
</ul>
<script type="text/javascript">
$(".checkBoxListLink > li > a").each(function(i) {
    var url = $(this).attr("href");
    $(this).next().load(url + " #sort_val");
});
</script>

Comments

[igaiga]

すみません。もう少し教えていただいてもいいでしょうか；；
サンプルで書いていただいたものそのままだとページ全体を読み込んできてしまいました。
+ "#sort_val"の部分をクォーテーションをとったり、変数に置きなおしたりすると今度は読み込まれなくなります。

[mri0815]

セレクタを指定する場合はURLの後に半角スペースが必要のようです。
http://api.jquery.com/load/

サンプルも修正しましたので、ご確認くださいませ。

[igaiga]

ありがとうございます！できました。