【发布时间】：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里面也可以重复你的自我。当你看到这样一堆只有几个返回值不同的无缝代码时......是时候重建了。
标签： javascript jquery html dom append