我是JavaScript和jquery的新手，我正在尝试附加一个有序的项目列表，以便在网络应用中创建一个ui。
我面临的问题是，如果项目与完全准备好的附加项目具有相同的产品代码，则该项目应该附加到详细信息div中，该项目应该包含具有与下面代码中相同的产品代码的所有项目。 / p>
在代码中我首先检查一下pai编号是否与前一个相同，因为每个pai编号可以有多个项目编号，如123445 - 1,12345 - 2,12345 - 3等。
然后检查下一个if语句中的产品代码是否相同，因为每个pai可能有多个具有不同产品代码的项目，如果它们没有不同，则将其附加到第二个详细信息div的第一个项目。
如果产品代码相同，则应将其附加到包含相同产品代码的详细信息div。
结构看起来应该是这样的。
<li>
<details>
<details>
product code1
product code1
<details>
<details>
product code2
product code2
product code2
product code2
<details>
<details>
product code3
product code3
<details>
<details>
</li>
但最终更像是这样
<li>
<details>
<details>
product code1
<details>
<details>
product code2
<details>
<details>
product code3
<details>
product code1
product code1
product code2
product code2
product code3
<details>
</li>
我无法附加任何图像，否则我会拍摄div结构的屏幕截图以帮助解释更多。
var elementApended;
var lastpai;
var itemList = new Object();
query.read().then(function(todoItems) {
var listItems = $.map(todoItems, function (item) {
if (item.painumber !== lastpai) {
for (var member in itemList) delete itemList[member];
elementApended = $('<details class="middle-div"></details>')
.append($('<details class="middle-div"></details>')
.append($('<div class="middle-middle-div"></div>')
.attr('data-todoitem-id', item.id)
.attr('data-todoitem-pai', item.painumber)
.attr('data-todoitem-item', item.itemnumber)
.attr('data-todoitem-link', item.drawingurl)
.append($('<div class="item-div"></div>').append($('<div class="Pai-Head"></div>').append(item.painumber))
.append($('<div class="Item-Head"></div>').append(item.itemnumber))
.append($('<div class="Product-Head"></div>').append(item.productcode))
.append($('<div class="Size-Head"></div>').append(item.xsize + " X " + item.ysize))
.append($('<div class="Qty-Head"></div>').append(item.quantity))
.append($('<div class="Disp-Head"></div>').append(item.dispatchdatetoshow)))
.append($('<div class="Button-Head"></div>').append('<button class="new-ncr-button">Raise New NCR</button>').append('<button class="new-di-button">New Drawing Issue</button>').append('<button class="view-drawings-button">View Product Drawings</button>'))
.append($('<details class="mods-div"><summary class="mods-summary">Check The Modifications Here</summary></details>').append($('<div class="mods-text">').append(item.modifications))))).appendTo('<li>');
lastpai = item.painumber;
itemList[item.productcode] = elementApended;
return elementApended;
} else {
if (itemList.hasOwnProperty(item.productcode)) {
return $(itemList[item.productcode])
.append($('<div class="middle-middle-div"></div>')
.attr('data-todoitem-id', item.id)
.attr('data-todoitem-pai', item.painumber)
.attr('data-todoitem-item', item.itemnumber)
.attr('data-todoitem-link', item.drawingurl)
.append($('<div class="item-div"></div>').append($('<div class="Pai-Head"></div>').append(item.painumber))
.append($('<div class="Item-Head"></div>').append(item.itemnumber))
.append($('<div class="Product-Head"></div>').append(item.productcode))
.append($('<div class="Size-Head"></div>').append(item.xsize + " X " + item.ysize))
.append($('<div class="Qty-Head"></div>').append(item.quantity))
.append($('<div class="Disp-Head"></div>').append(item.dispatchdatetoshow)))
.append($('<div class="Button-Head"></div>').append('<button class="new-ncr-button">Raise New NCR</button>').append('<button class="new-di-button">New Drawing Issue</button>').append('<button class="view-drawings-button">View Product Drawings</button>'))
.append($('<details class="mods-div"><summary class="mods-summary">Check The Modifications Here</summary></details>').append($('<div class="mods-text">').append(item.modifications))));
} else {
secondElementApended = $(elementApended)
.append($('<details class="middle-div"></details>')
.append($('<div class="middle-middle-div"></div>')
.attr('data-todoitem-id', item.id)
.attr('data-todoitem-pai', item.painumber)
.attr('data-todoitem-item', item.itemnumber)
.attr('data-todoitem-link', item.drawingurl)
.append($('<div class="item-div"></div>').append($('<div class="Pai-Head"></div>').append(item.painumber))
.append($('<div class="Item-Head"></div>').append(item.itemnumber))
.append($('<div class="Product-Head"></div>').append(item.productcode))
.append($('<div class="Size-Head"></div>').append(item.xsize + " X " + item.ysize))
.append($('<div class="Qty-Head"></div>').append(item.quantity))
.append($('<div class="Disp-Head"></div>').append(item.dispatchdatetoshow)))
.append($('<div class="Button-Head"></div>').append('<button class="new-ncr-button">Raise New NCR</button>').append('<button class="new-di-button">New Drawing Issue</button>').append('<button class="view-drawings-button">View Product Drawings</button>'))
.append($('<details class="mods-div"><summary class="mods-summary">Check The Modifications Here</summary></details>').append($('<div class="mods-text">').append(item.modifications)))));
itemList[item.productcode] = secondElementApended;
return secondElementApended;
}
}
});
如果任何人可以指导我朝着正确的方向前进，或者给我一些关于如何更好地实现这一目标的提示，我们将非常感激。
答案 0 :(得分：0)
我最终想到了这个问题，我将发布代码以防其他任何人遇到此问题。
我认为尝试在地图中进行追加会导致问题。
function refreshTodoItems(filter) {
var elementToApended;
var lastPai;
var itemList = new Object();
var listItems;
$('#todo-items').empty();
if (filter) {
var query = todoItemTable.where({ painumber: filter, producttype: 'manufactured' })
.orderBy('dispatchdate')
.orderBy('painumber')
.orderBy('itemnumber')
.take(500);
} else {
var query = todoItemTable.where({ producttype: 'manufactured' })
.orderBy('dispatchdate')
.orderBy('painumber')
.orderBy('itemnumber')
.take(500);
}
query.read().done(function (todoItems) {
for (i = 0; i < todoItems.length; i++) {
if (todoItems[i].painumber !== lastPai) {
createGuiItems(todoItems[i]);
}
lastPai = todoItems[i].painumber;
}
}, handleError );
function createGuiItems(item) {
var query2 = todoItemTable.where({ painumber: item.painumber, producttype: 'manufactured' })
.orderBy('dispatchdate')
.orderBy('painumber')
.orderBy('itemnumber');
query2.read().done(function (item) {
for (var member in itemList) delete itemList[member];
elementToApended = $('<details class="middle-div" id="' + item[0].painumber + '"></details>').appendTo('<li>');
for (i = 0; i < item.length; i++) {
if ((itemList.hasOwnProperty(item[i].productcode)) && (item[i].itemnumber !== 1)) {
var thirdElementApended = $('<div class="middle-middle-div"></div>', { 'data-todoitem-id': item[i].id, 'data-todoitem-item': item[i].painumber, 'data-todoitem-item': item[i].itemnumber, 'data-todoitem-link': item[i].drawingurl })
.append($('<div class="item-div"></div>').append($('<div class="Pai-Head"></div>').append(item[i].painumber))
.append($('<div class="Item-Head"></div>').append(item[i].itemnumber))
.append($('<div class="Product-Head"></div>').append(item[i].productcode))
.append($('<div class="Size-Head"></div>').append(item[i].xsize + " X " + item[i].ysize))
.append($('<div class="Qty-Head"></div>').append(item[i].quantity))
.append($('<div class="Disp-Head"></div>').append(item[i].dispatchdatetoshow)))
.append($('<div class="Button-Head"></div>').append('<button class="new-ncr-button">Raise New NCR</button>').append('<button class="new-di-button">New Drawing Issue</button>').append('<button class="view-drawings-button">View Product Drawings</button>'))
.append($('<details class="mods-div"><summary class="mods-summary">Check The Modifications Here</summary></details>').append($('<div class="mods-text">').append(item[i].modifications)));
$(elementToApended).find('#' + item[i].productcode).append(thirdElementApended)
} else {
var secondElementApended = $('<details class="middle-div" id="' + item[i].productcode + '"></details>')
.append($('<div class="middle-middle-div"></div>', { 'data-todoitem-id': item[i].id, 'data-todoitem-item': item[i].painumber, 'data-todoitem-item': item[i].itemnumber, 'data-todoitem-link': item[i].drawingurl })
.append($('<div class="item-div"></div>').append($('<div class="Pai-Head"></div>').append(item[i].painumber))
.append($('<div class="Item-Head"></div>').append(item[i].itemnumber))
.append($('<div class="Product-Head"></div>').append(item[i].productcode))
.append($('<div class="Size-Head"></div>').append(item[i].xsize + " X " + item[i].ysize))
.append($('<div class="Qty-Head"></div>').append(item[i].quantity))
.append($('<div class="Disp-Head"></div>').append(item[i].dispatchdatetoshow)))
.append($('<div class="Button-Head"></div>').append('<button class="new-ncr-button">Raise New NCR</button>').append('<button class="new-di-button">New Drawing Issue</button>').append('<button class="view-drawings-button">View Product Drawings</button>'))
.append($('<details class="mods-div"><summary class="mods-summary">Check The Modifications Here</summary></details>').append($('<div class="mods-text">').append(item[i].modifications))));
$(elementToApended).append(secondElementApended)
itemList[item[i].productcode] = 1;
}
}
$('#todo-items').append(elementToApended)
$('.mods-text:empty').each(function () {
if (jQuery.trim($(this).val()) == "") $(this).parent().remove();
});
$('.Product-Head').each(function () {
var val = $(this).text();
if ((val.indexOf('B1000') !== -1) || (val.indexOf('B2000') !== -1) || (val.indexOf('B3000') !== -1) || (val.indexOf('B4000') !== -1) || (val.indexOf('B5000') !== -1) || (val.indexOf('B6000') !== -1) || (val.indexOf('B7000') !== -1) || (val.indexOf('B8000') !== -1) || (val.indexOf('B9000') !== -1) || (val.indexOf('B-') !== -1)) {
$(this).parent().parent().css('border-color', 'red');
}
if ((val.indexOf('SK1000') !== -1) || (val.indexOf('SK2000') !== -1) || (val.indexOf('SK3000') !== -1) || (val.indexOf('SK4000') !== -1) || (val.indexOf('SK5000') !== -1) || (val.indexOf('SK6000') !== -1) || (val.indexOf('SK7000') !== -1) || (val.indexOf('SK8000') !== -1) || (val.indexOf('SK9000') !== -1)) {
$(this).parent().parent().css('border-color', 'green');
}
if ((val.indexOf('TL') !== -1) || (val.indexOf('Plastic') !== -1) || (val.indexOf('Plastics') !== -1)) {
$(this).parent().parent().css('border-color', 'green');
}
if ((val.indexOf('N1000') !== -1) || (val.indexOf('N2000') !== -1) || (val.indexOf('N3000') !== -1) || (val.indexOf('N4000') !== -1) || (val.indexOf('N5000') !== -1) || (val.indexOf('N6000') !== -1) || (val.indexOf('N7000') !== -1) || (val.indexOf('N8000') !== -1) || (val.indexOf('N9000') !== -1) || (val.indexOf('NFC') !== -1) || (val.indexOf('NSC') !== -1) || (val.indexOf('NPS') !== -1) || (val.indexOf('N-') !== -1)) {
$(this).parent().parent().css('border-color', 'blue');
}
if ((val.indexOf('S1000') !== -1) || (val.indexOf('S2000') !== -1) || (val.indexOf('S3000') !== -1) || (val.indexOf('S4000') !== -1) || (val.indexOf('S5000') !== -1) || (val.indexOf('S6000') !== -1) || (val.indexOf('S7000') !== -1) || (val.indexOf('S8000') !== -1) || (val.indexOf('S9000') !== -1) || (val.indexOf('SFC') !== -1) || (val.indexOf('SSC') !== -1) || (val.indexOf('SPS') !== -1)) {
$(this).parent().parent().css('border-color', 'blue');
}
$('#summary').html('<strong>' + $('#todo-items > details').length + '</strong> Order(s) Incomplete');
$('#errorlog').empty();
});
}, handleError );
}
}