複数あるliにhref属性を表示させたい

Question

###前提・実現したいこと

<ul>
<li><a href="red.jpg" target="_blank"></a></li>
<li><a href="blue.jpg" target="_blank"></a></li>
<li><a href="green.jpg" target="_blank"></a></li>
</ul>

上記コードにjavascriptの記述を追加して、
href属性の値を表示させ、リンクさせたい。

表示結果
・red.jpg（クリックでred.jpgへ飛ぶ）
・blue.jpg
・green.jpg

###A案

<script>
$(function () {
	    $('li').each(function() {
		$(this).text($('a').attr('href'));
    });
});
</script>

A 結果この通り表示されますが、リンクされません。
・red.jpg
・blue.jpg
・green.jpg

###B案

<script>
$(function () {
	$('a').each(function() {
		$(this).text($('a').attr('href'));
	});

});
</script>

B 結果 リンクされますが全てred.jpgが表示されます
・red.jpg
・red.jpg
・red.jpg

javascript勉強を始めたばかりです。
よろしくお願いします。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[mayuko]

ありがとうございました。見づらくてすみませんでした。

[kei344]

ここは「質問への追記・修正の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。

[mayuko]

編集しました。ありがとうございました。

Answer 1

$('a').each(function() {
  $(this).text($(this).attr('href'));
});

でしょ。

全てred.jpgが表示され

るのは「$('a').attr('href')」をやったためで、最初のaタグのhref属性の値が取れてしまったのですね。

Comments

[mayuko]

早速ありがとうございました。
出来ました！
間違えていた部分、分かりました。
ひき続き勉強します。

Answer 2

すでに解決済みとなっていますが、この場合はJavaScriptを使わなくてもCSSだけでできると思うので書いておきます。

ul a:after {
  content: attr(href);
}

Comments

[mayuko]

ありがとうございました。
出来ました。
css attr 知りませんでした。思いがけず、勉強になりました。

Answer 3

liの中のaのtextが空なら、aのhrefを書き込むという仕様であればこう

$(function(){
  $('li a').filter(function(){return $(this).text()==""}).text(
    function(){return $(this).attr('href')}
  );
});

<ul>
<li><a href="red.jpg" target="_blank"></a></li>
<li><a href="blue.jpg" target="_blank"></a></li>
<li><a href="green.jpg" target="_blank"></a></li>
<li><a href="green.jpg" target="_blank">test</a></li>
</ul> 

Comments

[mayuko]

早速ありがとうございました。
出来ました！
こちらは汎用性がありますね。
復讐します。
ありがとうございました。

[tkturbo]

「復讐」してどうする（笑

[mayuko]

復習でしたっ。
ありがとうございます。

[mayuko]

自分用メモ
filter
条件にあうものだけを抽出。
arrayは元の配列。index, arrayは省略可能。
例）
var filtered = [12, 5, 8, 130, 44].filter(function(element, index, array) {
return (element >= 10);
});
参照元
http://qiita.com/itagakishintaro/items/29e301f3125760b81302