如何將追加的數組與追加div

Question

內的關聯數據追加我試圖將數據添加到基於對象的DOM。對象內部是'標籤'的數組。當使用來自對象的數據將新的div附加到DOM時，當我循環訪問它們時，標記將無法正確呈現。它們與它們所關聯的對象數據不一致。

我不知道如何讓它們正確顯示。任何想法會有所幫助，謝謝

var houses = { 


"house": [{ 
    "source": "images/background.jpg", 
    "gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"], 
    "short_desc": "3 BR, 2 Bath, Bellville, NJ", 
    "long_desc": "Great 2 family in a prime location. Close to public transportation, schools, and shopping. This property is subject to 3rd party approval, Town CO and permits to be paid by the buyer.", 
    "address": "268 Washington Ave Belleville, NJ 07109", 
    "sq_ft": "3,456 sqft", 
    "price": "262,000", 
    "tags": ["For Purchase", "Multi-family", "Duplex", "House", "3 Bed", "2 Bath"] 
    }, { 
    "source": "images/background.jpg", 
    "gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"], 
    "short_desc": "3 BR, 2 Bath, West Orange, NJ", 
    "long_desc": "Single Family Home for sale by owner in West Orange, NJ. Charming colonial in great location on large park-like property in West Orange, border of Roseland. Living room with beamed ceiling and wood stove, eat-in kitchen with granite countertops. Updated bath, oversized laundry room off kitchen also serves as pantry. Spiral staircase leads to 3 bedrooms on second floor. Three-season sunroom leads to deck and beautiful backyard, great for entertaining. Fenced front and side yard, with koi pond. Newer roof, freshly painted exterior.", 
    "address": "55 Laurel Ave West Orange, NJ 07052", 
    "sq_ft": "1,618 sqft", 
    "price": "344,900", 
    "tags": ["For Purchase", "Single-family"] 
    }, { 
    "source": "images/background.jpg", 
    "gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"], 
    "short_desc": "3 BR, 2 Bath, Berkely Heights, NJ", 
    "long_desc": "Great 2 family in a prime location. Close to public transportation, schools, and shopping.", 
    "address": "268 Washington Ave Belleville, NJ 07109", 
    "sq_ft": "3,456 sqft", 
    "price": "140,000", 
    "tags": ["For Purchase", "Multi-family", "Duplex", "House"] 
    }, { 
    "source": "images/background.jpg", 
    "gallery": ["images/house-name-1.jpg", "images/house-name-2.jpg", "images/house-name-3.jpg"], 
    "short_desc": "1 BR Studio, Newark, NJ", 
    "long_desc": "Great 2 family in a prime location. Close to public transportation, schools, and shopping.", 
    "address": "268 Washington Ave Belleville, NJ 07109", 
    "sq_ft": "3,456 sqft", 
    "price": "140,000", 
    "tags": ["For Purchase", "Single-family", "2 Car Garage", "House"] 
    }, ] 
} 

// Set variable for houses in images object 
var home = houses.house; 

// create house card for each house in houses object 
$.each(home, function(index, value) { 


    var new_tag = home[index].tags; 

    $.each(new_tag, function(key, value) { 
    $(".homes-tags").append("<p class='tag'>" + value + "</p>"); 
    }); 


    $('#homes-list').append('<div class="house-card"><div class="row"><div class="col span_7"><h2 class="short-desc">' + value.short_desc + '</h2><p class="address">' + value.address + '</p><p class="sqft">' + value.sq_ft + '</p><p class="price">' + value.price + '</p><p class="long-desc">' + value.long_desc + '</p></div><div class="col span_5 image"><img src="' + value.source + '" width="100%" /><p class="homes-tags"></p></div></div><div class="clear"></div></div>'); 

}); 

請參閱的jsfiddle代碼問題 https://jsfiddle.net/vtc1ewrz/

Answer 1

你的代碼是有點亂，你從錯誤的角度接近這一點。但真正的問題是，您將標籤應用於尚未添加到頁面的元素。然後你重複這個過程，所以你基本上會替換你正在迭代的每個新房子的.homes-tags。

我已經改變了代碼以下，從而解決您的問題：

// create house card for each house in houses object 
$.each(home, function(index, value) { 
    var new_tag = home[index].tags; 

    var newHtml = '<div class="house-card"><div class="row"><div class="col span_7"><h2 class="short-desc">' + value.short_desc + '</h2><p class="address">' + value.address + '</p><p class="sqft">' + value.sq_ft + '</p><p class="price">' + value.price + '</p><p class="long-desc">' + value.long_desc + '</p></div><div class="col span_5 image"><img src="' + value.source + '" width="100%" /><div class="homes-tags">'; 

    $.each(new_tag, function(key, value) { 
    newHtml += '<p class="tag">' + value + '</p>'; 
    }); 

    newHtml += '</div></div></div><div class="clear"></div></div>'; 

    $('#homes-list').append(newHtml); 
}); 

但是，說實話，這不是很大的總稱。例如，您將邏輯與演示混合在一起。而且，$.each比簡單地使用for循環更「」昂貴「。