jquery - 拆分 var 并在 html 中使用数组键创建 N 个 div

Question

感谢您的阅读。
如果我们有:var 字母 = 'a b c h';//...

我们怎样才能得到这个结果:

<div class="box">
  <div class="letter">a</div>
  <div class="letter">b</div>
  <div class="letter">c</div>
  <div class="letter">h</div>
  <!-- ... -->
</div>

(在 DOM 中)类似:

var letters = 'a b c h k w x'; // 7 letters (can be more...)
var char = letters.split(' ');
var nOfChars = char.length;

var divLetter = $('<div class="letter" />');

for(var char = 0; char < nOfChars; ++char) {  


    $('.box').append( divLetter );
    $('divLetter').html( char );

}

(我知道，这很不好。请帮忙)

Answer 1

var letters = 'a b c h';

// don't know if you want to append to body or now, but you can fool with
// the placement of the "Wrapper" div here.
var divLetter = $('<div>',{ class: 'letter'}).appendTo('body');

$.each(letters.split(' '),function(i,e){
    $('<div>',{
        class: 'letter',
        html: e
    }).appendTo(divLetter);
});

demo

分割如下:

1. “字母”数组也是您所习惯的，简单明了。
2. div 是您已经在使用的另一个东西，但我已使用 .appendTo 将其附加到 DOM。您可以将其放置在任何地方，或者将 div 已经放在页面上 - 由您决定。
3. 我使用 jQuery 的 .each()方法应用于 String.split 的结果(这会产生一个字母数组)。然后每个开始迭代每个唯一的字母
   1. 对于每个字母，我们建立一个新的 div
   2. 我们使用 jQuery 的 object 参数来应用新元素的类和主体
   3. 我们称之为 appendTo将其附加到原始 div

总而言之，我们已经得到了您想要的结果。