如何用jquery匹配obj和类名

Question

在本例中，我将把div描述为一个带有方形和圆形孔的框。

框:

<div id="box">
<div class="square"></div>
<div class="circle"></div>
</div>

然后，我有一个对象放到一个盒子里。

对象形状:

var string = [ 
{shape: 'square', item: 'item1'},
{shape: 'square', item: 'item2'},
{shape: 'circle', item: 'item3'}
];

然后我想把物体按照相同的孔的形状放进盒子里。

$.each(string, function(key, e) {
/* if inside the div box has several names equal to the value obj */
if ($('#box').find().attr('class') == e.shape) {
var data = "<span>" + e.item + "</span>"
$(data).appendTo(e.shape);
/* append value item to 
each div with same name */
}
});

但是这个代码对我不起作用。我想要的结果是这样的

<div id="box">
<div class="square">
<span>item1</span>
<span>item2</span>
</div>
<div class="circle">
<span>item3</span>
</div>
</div>

Answer 1

考虑以下内容:

$(function() {
var string = [{
shape: 'square',
item: 'item1'
},
{
shape: 'square',
item: 'item2'
},
{
shape: 'circle',
item: 'item3'
}
];
$.each(string, function(i, s) {
$("#box ." + s.shape).append("<span class='item'>" + s.item + "</span>");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
<div class="square"></div>
<div class="circle"></div>
</div>

使用Class选择器来选择Shape:$("." + s.shape)。这将串接字符串，因此最终得到$(".square")。一旦你选择了合适的元素，你就可以添加到它上面。

生成的HTML

<div id="box">
<div class="square">
<span class="item">item1</span>
<span class="item">item2</span>
</div>
<div class="circle">
<span class="item">item3</span>
</div>
</div>

Answer 2

这可以更简单一点，也许可以使用形状作为一个类:

var newContent = [{
shape: 'square',
item: 'item1'
},
{
shape: 'square',
item: 'item2'
},
{
shape: 'circle',
item: 'item3'
}
];
$.each(newContent, function(index, val) {
console.log(index, val);
$('#box')
.find("." + val.shape)
.append("<span class='item-thing'>" + val.item + "</span>")
});

.item-thing {
border: 1px solid lime;
margin-right: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
<div class="square"></div>
<div class="circle"></div>
</div>