jquery - 属性をキャプションに変換する

Question

次のコードを使用して、リストにある各画像からtitle属性を取得しています。

$("ul#images li img").each(function(index) {
    $(this).attr("title");
});

次に、この属性を各画像のキャプションとして使用するにはどうすればよいですか？最初にそれを文字列に変換してからリストアイテムに追加する必要がありますか？

ありがとう

Answer 1

CSSとJavaScriptの変更が必要になります。ただし、基本的には、attr値を取得して、好きな場所に追加します。

あなたの例を使用して：

http://jsbin.com/irabiv/1/edit

$("ul#images li img").each(function(index) {
    $(this).parent().append('<div class="caption">'+$(this).attr("title")+'</div>');
});

Answer 2

属性は常に文字列であり、titleプロパティも文字列であるため、追加する必要があります。

$("ul#images li img").each(function() {
    $(this).closest('li').append('<br>' + this.title);
});

フィドル

よりセマンティックなHTML5ソリューションをお探しの場合はfigure、figcaption要素を使用することをお勧めします。

$("ul#images li img").each(function() {
    $(this).wrap('<figure/>').after($('<figcaption>', {text: this.title}));
});

フィドル