[英]How do I remove certain elements matching criteria from an array in javascript?
[英]When looping through an array how do I add/remove classes from elements that fit a specific criteria?
下面,我有遍歷項目列表的代碼,並且如果element.hazardous == no,我想從div類item-left中刪除一個“危險”類。 我現在設置的方式不起作用,我想知道是否可能是因為我需要找到一種針對特定的非危險陣列元素的方法。
我的CSS中的“危險”功能是,如果危險類別處於活動狀態,它將添加一個紅色實線邊框。 否則,隱藏紅色邊框。
function showProducts(items) {
var itemsHTML = [];
items.forEach(function(element) {
var url = element.url ? element.url : 'http://placehold.it/100x100'
itemsHTML.push('<li><div class="item-left hazardous" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
'Product: ' + element.product + '</p></span><span class="prod-loc">' +
'Location: ' + element.location + '</span><span class="qty">' +
'Quantity: ' + element.quantity + '</span></div>' +
'<div class="item-right"><img src="' + url + '"></div></li>')
if (element.hazardous == 'no') {
$('.item-left').removeClass('hazardous')
}
});
$('.results').html(itemsHTML)
}
不必首先對hazardous
類進行硬編碼,而是在將標記呈現給DOM之前有條件地應用它:
function showProducts(items) {
var itemsHTML = [];
items.forEach(function(element) {
var classes = ['item-left', element.hazardous === 'no' ? '' : 'hazardous'].join(' ').trim()
var url = element.url ? element.url : 'http://placehold.it/100x100'
itemsHTML.push('<li><div class="' + classes + '" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
'Product: ' + element.product + '</p></span><span class="prod-loc">' +
'Location: ' + element.location + '</span><span class="qty">' +
'Quantity: ' + element.quantity + '</span></div>' +
'<div class="item-right"><img src="' + url +
'"></div></li>')
});
$('.results').html(itemsHTML)
您面臨的問題之一是您試圖從尚不存在的DOM元素中刪除一個類-那時它仍然是一個字符串。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.