javascript - JQuery で配列の内容を span タグの title に設定する

Question

私はこのような配列を持っています:

var name = ["cat","shark","tiger","snake"];

配列の内容を<span>タイトルに設定したい。

HTML コード:

<ul id="select">
    <li class="ui-state-default"><span>CAT</span></li>
    <li class="ui-state-default"><span>SHARK</span></li>
    <li class="ui-state-default"><span>TIGER</span></li>
    <li class="ui-state-default"><span>SNAKE</span></li>
</ul>

jqueryコード:

for(var i=0; i<=name.length; i++){
        $('#select li > span').each(function() {
        this.title = name[i];
        });
    }; 

しかし、このコードは機能しません。スパンのタイトルは不定です。

Answer 1

のテキストをtitle意味する場合は、次のことをお勧めします。span

$('#select li span').text(function(i){
    return name[i];
});

JS フィドルのデモ。

または、 title属性を設定しようとしている場合は、次のことをお勧めします。

$('#select li span').attr('title',function(i){
    return name[i];
});

JS フィドルのデモ。

Answer 2

スパンと配列をループしても意味がありません。また、常に配列を超えi <= name.lengthてループすることを意味します（する必要があります）。これは、実際には各スパンのタイトルを存在しない配列要素に設定していたことを意味します。<

$('#select li > span').each(function(i) {
    $(this).attr('title', name[i]);
});

が存在することを確認することもできname[i]ます。

http://jsfiddle.net/wtbE5/

Answer 3

試す：

$('#select li span').each(function(i){
    $(this).html(name[i]);
});

サンプル