使用jquery将项目添加到附加项目

我是JavaScript和jquery的新手，并试图附加一个有序的项目列表以在Web应用程序中创建UI。使用jquery将项目添加到附加项目

我面临的问题是试图附加一个项目，如果它具有相同的产品代码作为所有准备好的附加项目的详细信息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; 
        } 
       } 
     });

如果任何人可以指导我在正确的方向或者给我看这样做，他们将是非常赞赏的一个更好的办法的一些技巧。

来源

2015-10-24 James Turner

你可以尝试重新写你的第一段是更具描述性的，我敢肯定我们中的一个人可以帮助，但不是很确定你想达到什么？ – AdamJeffers

仅仅通过查看你的代码，我不能看到所有这些append和attr的需求是什么，因为它可以使用'$（“”，{attr1：val1，attr2：val2，html：element，...} ）' –

您可以创建帮助函数，该函数返回所需的元素，或者与变量连接的嵌套HTML字符串。比任何情况下都更可读... –

我想到了这个问题，最后我会发布代码，以防其他人遇到此问题。

我认为试图在地图上追加是造成这个问题。

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); 
    } 

}

来源

2015-10-25 13:03:45

使用jquery将项目添加到附加项目

回答

相关问题