在 div 内正确附加和设置标签和跨度

Question

我在这个小提琴中做错了什么？ Fiddle

我想要完成的是在另一个 div 中有多个 div，其中有标签和跨度。标签必须在左侧，并且与右侧的文本跨越，每个 div 的底部有一个实心边框来分隔它们。

在上面的小提琴中，我什至无法将背景设置为 div 的颜色。像这样的：

<div class="standards">
     <div class=""><label></label><span><span></div>
     <div class=""><label></label><span><span></div>
     <div class=""><label></label><span><span></div>
</div>

所以最终结果应该是这样的

HTO    some text
__________________

HTO    some text
__________________

Answer 1

$('.tab_field_pair') 选择所有具有相应类的 html 节点。因此，当您附加第一个并想要附加第二个时，它会选择两个 div。

你可以这样做：

var code = "HT0";
var label = 'evaluate the social, political, economic, and cultural contributions of individuals and groups from various societies, past and present'

var length = 5;

for (var i = 0; i <= length; i++){
var $div=$("<div class='tab_field_pair'> </div>");
$('.standards').append($div);
$div.append("<label id='standardscode'>" + code + "</label><span id='standardslabel'>" + label + "</span>")
}

http://jsfiddle.net/2dJAN/1351/