使用jquery将项目附加到附加项目
Posted
技术标签:
【中文标题】使用jquery将项目附加到附加项目【英文标题】：Appending items to appended items with jquery 【发布时间】：2016-01-23 19:23:27 【问题描述】：我是 javascript 和 jquery 的新手，我正在尝试附加一个有序的项目列表以在 Web 应用程序中创建一个 ui。
我面临的问题是尝试将一个项目附加到与所有准备好的附加项目相同的产品代码到详细信息 div 中，该 div 应该包含与下面代码中具有相同产品代码的所有项目。
在代码中，我首先检查 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;
);
如果有人可以指导我朝着正确的方向前进，或者给我一些建议以寻找更好的方法，他们将不胜感激。
【问题讨论】：
您能否尝试重写您的第一段以更具描述性，我相信我们中的一个人可以提供帮助，但不太确定您想要达到什么目的？ 仅通过查看您的代码，我看不出所有这些 append 和 attr 有什么需要，因为可以使用$("<tag />", attr1:val1, attr2:val2, html: element, ...) 轻松完成
您可以创建返回所需元素的辅助函数，或与变量连接的嵌套 HTML 字符串。在任何情况下都比这更具可读性......
在if / else 里面也可以重复你的自我。当你看到这样一堆只有几个返回值不同的无缝代码时......是时候重建了。
【参考方案1】：
最后我自己想出了这个，我会发布代码以防其他人遇到这个问题。
我认为尝试在地图中进行附加是导致问题的原因。
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 );
【讨论】：
以上是关于使用jquery将项目附加到附加项目的主要内容，如果未能解决你的问题，请参考以下文章
使用 AWS AppSync 将项目附加到 DynamoDB