Question

感谢您的阅读如果我们有： var letters ='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

细分，以下是：

“字母”数组也是你习惯的，直接的。
div是你已经使用的另一件事，但我已经使用.appendTo将它附加到DOM。你可以把它放在任何地方，或者在页面上已经有div - 由你决定。
我使用jQuery的.each()方法应用于String.split的结果（产生一个字母数组）。然后每个开始迭代每个独特的字母
1. 对于每封信，我们建立一个新的div
2. 我们使用jQuery的object参数来应用新元素的类和主体
3. 我们致电appendTo将其附加到原始div

所有说完了，我们得到了你正在寻找的结果。

Answer 2

var string = "a b c d";
var parts = string.split(" ");
for(key=0;key < parts.length;key++)
{
    $(".box").append($("<div>").addClass("letter").html(parts[key]));
}

Answer 3

试试这个：

http://jsfiddle.net/sexDH/（哈哈）

var letters = 'a b c h k w x', // 7 letters (can be more...)
    chars = letters.split(' '),
    nOfChars = chars.length,
    $divLetter = $('<div class="letter" />'),
    letterFragment = document.createDocumentFragment();

for (var i=0; i<nOfChars; i++) {
    letterFragment.appendChild( $divLetter.clone().html(chars[i])[0] );
}

$('.box').append( letterFragment.cloneNode(true) );

拆分var并在html中使用数组键创建div的N.

3 个答案: