Question

我正在尝试创建一个框，其中包含我的数组中每个具有user_id = 1的对象的信息。

所以在这种情况下，应该在html中创建2个框。

"data": [
{
"id": 1,
"user_id": 1,
"name": "James Smith"
},
{
"id": 2,
"user_id": 1,
"name": "Rebecka Gordon"
},
{
"id": 3,
"user_id": 2,
"name": "Carl Gonzales"
},
]


$.each(data.data, function (index, value) {

    if (this.user_id == 1) {

      console.log(this);

        $('.container').html($('<div>', {class: 'box'}));

    }

});

Answer 1

根据html()方法的docs功能：“设置匹配元素集中每个元素的HTML内容。”

这意味着即使您在循环中匹配两个对象，也要将'.container'元素的内容设置为相同的两次。

.html()使用.append()

的内容

Answer 2

在这一行：

$.each(data.data, function (index, value) {

您使用的是data.data，但数据足以引用该数组：

$.each( data, function( index, value ){

在这一行：

if (this.user_id == 1) {

这不是引用数组，你有它的值：

if (value.user_id == 1) {

.html会为您提供对特定DOM元素的引用，但有助于添加新元素。 .append会这样做：

$('.container').append('<div></div>')

所有这一切应该是：

$.each( data, function( index, value ){
    if (value.user_id == 1) {

       $('.container').append('<div class="box">I am a box</div>');    

    }

});

Demo

为数组中的每个对象创建具有条件的div

2 个答案: