Question

所以我希望将字母表中的每个字母附加一个唯一的类或相同的类，但具有该字母的唯一数据值。我有这个

$('.letter').each(function(i){
for(var i=65;i<=90;i++) {
        $(this).append(String.fromCharCode(i));
    }
});

附加 ABCDEFGHIJK ..... 进入我现有的所以最终的输出是

<div class="letter">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

我该怎么做才能显示为：

<div class="letter-a">a</div>
<div class="letter-b">b</div>
<div class="letter-c">c</div>

或

<div class="letter" data-value="a">a</div>
<div class="letter" data-value="b">b</div>
<div class="letter" data-value="c">c</div>
<div class="letter" data-value="d">d</div>

谢谢！

Answer 1

var letters = $.trim($('.letter').text()).toLowerCase();
for (var i = 0, len = letters.length; i < len; i++) {
    $('<div />', {
        'class': 'letter-' + letters[i],
        text: letters[i]
    }).appendTo('.letters');
}

DEMO： http://jsfiddle.net/tXw4D/

或者替换现有的<div>：

$('.letter').html(function(i, letters) {
    for (var i = 0, len = letters.length, html = ''; i < len; i++) {
        var letter = letters[i].toLowerCase();
        html += '<div class="letter-' + letter + '">' + letter + '</div>';
    }
    return html;
});

DEMO： http://jsfiddle.net/tXw4D/1/

Answer 2

追加

时创建一个div

$('.letter').each(function(i){
for(var i=65;i<=90;i++) {
        $(this).append('<div class="letter-'+String.fromCharCode(i)+'">'+String.fromCharCode(i)+'</div>');
    }
});

DEMO

Answer 3

试试这个：

$('.letter').each(function(i){
    for(var i=65;i<=90;i++) {
        var c = String.fromCharCode(i).toLowerCase();
        $(this).append("<div class='letter-"+c+"'>"+c+"</div>");
    }
});

<强> Fiddle here.

Answer 4

$('.letter').replaceWith(function () {
    var text = $.trim($(this).text());
    return $.map(text.split(''), function (char) {
        return '<div class="letter" data-value="' + char + '">' + char + '</div>';
    }).join('');
})

演示：Fiddle

用独特的类附加字母

4 个答案: