Question

我有以下代码。现在我正在使用Jquery构建列表。我如何使用Javascript / JQuery做到这一点？

完成后的Html（原始）应该如下所示

<?xml version="1.0" encoding="UTF-8"?>
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema">
    <xsd:element nillable="true" name="PartsReports">
        <xsd:complexType>
            <xsd:sequence minOccurs="0">
                <xsd:element minOccurs="0" maxOccurs="unbounded" nillable="true" name="Parts" form="unqualified">
                    <xsd:complexType>
                        <xsd:sequence minOccurs="0">
                            <xsd:element minOccurs="0" nillable="true" type="xsd:string" name="Part_No" form="unqualified"/>
                            <xsd:element minOccurs="0" nillable="true" type="xsd:string" name="Part_Prim_Desc" form="unqualified"/>
                            <xsd:element minOccurs="0" nillable="true" type="xsd:string" name="Part_Secd_Desc" form="unqualified"/>
                            <xsd:element minOccurs="0" nillable="true" type="xsd:string" name="Supp" form="unqualified"/>
                            <xsd:element minOccurs="0" nillable="true" type="xsd:string" name="SupplierCode" form="unqualified"/>
                        </xsd:sequence>
                    </xsd:complexType>
                </xsd:element>
            </xsd:sequence>
        </xsd:complexType>
    </xsd:element>
</xsd:schema>

的Jquery / JAVASCRPIT

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<PartsReports xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <Parts>
        <Part_No>E100001</Part_No>
        <Part_Prim_Desc>PCB IKON REV B</Part_Prim_Desc>
        <Part_Secd_Desc>223</Part_Secd_Desc>
        <Supp>H065</Supp>
        <SupplierCode>TN01492  - ISSUE B</SupplierCode>
    </Parts>
    <Parts>
        <Part_No>E100002</Part_No>
        <Part_Prim_Desc>PCB P095 AMF DISPLAY</Part_Prim_Desc>
        <Part_Secd_Desc/>
        <Supp>C104</Supp>
        <SupplierCode>P095</SupplierCode>
    </Parts>
    <Parts>
        <Part_No>E100003</Part_No>
        <Part_Prim_Desc>PCB P042 AMF</Part_Prim_Desc>
        <Part_Secd_Desc>(50 OFF)</Part_Secd_Desc>
        <Supp>H065</Supp>
        <SupplierCode>TN02367</SupplierCode>
    </Parts>
    <Parts>
        <Part_No>E100004</Part_No>
        <Part_Prim_Desc>PCB P010 KEYSTART</Part_Prim_Desc>
        <Part_Secd_Desc/>
        <Supp>H065</Supp>
        <SupplierCode>TN05852</SupplierCode>
    </Parts>
...

上述代码仅在HTML上已存在列表而不是动态创建列表时才有效。我将通过Ajax查询构建列表。真的很感激，如果你们可以告诉我如何动态地实现上面的代码，因为列表建立在点击事件上。

Answer 1

这就是我所拥有的。我没有使用新的Javascript表示法（并不是它的粉丝），但是如果你想在项目中保持一致，我确信你可以转录我写入ES的内容。

我采用了一种非常类似的方法，但是我没有动态创建元素。如果你知道这个元素无论如何都会存在于页面上，我个人的理念就是让它存在并且是空的，这样你就不必自己创建它。

如果这些列表是动态加载的（我在使用codepen时无法测试），那么将其放入创建列表元素后调用的函数中。 最好在加载数据时简单地浏览一下数据，只进行一次适用的DOM更改，但有时我们会做必要的

＆＃13;

$(function() {
  $('#run-code').on('click', function(e) {
    e.preventDefault();
    //What were you doing? nope.
    var currentItems = {}; //Blank object
    var $mergeColumn = $('#CommonLister'); //Common list reference
    $('.columnItem').each(function(i, el) {
      var $el = $(el); //Notation I use to differentiate between the regular HTML Element and jQuery element
      if (!currentItems.hasOwnProperty($el.html())) {
        //Has this name come up before? if not, create it.
        currentItems[$el.html()] = []; //Make it equal to a brand spanking new array
      }
      currentItems[$el.html()].push(el);
      //Add the item to the array
    });

    $.each(currentItems, function(name, data) {
      //Loop through each name. We don't actually use the name variable because we don't care what someone's name is
      if (data.length > 1) {
        //Do we have more than 1 element in our array? time to move some stuff
        $.each(data, function(i, el) {
          var $el = $(el); //See note above
          if (i == 0) {
            //If this is the first element, let's just go ahead and move it to the merge column ul
            $el.appendTo($mergeColumn);
          } else {
            $el.remove(); //Otherwise, we've already got this element so delete this one.
          } //end if/else
        }); //end $.each(data)
      } //end if data.length >1
    }); //end $.each(currentItems)

  }); //end $.on()
}); //end $()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="run-code" class="btn btn-success">Click Me</button>

<h4>List 1</h4>
<ul id="listOne">
  <li class="columnItem">John</li>
  <!--will be removed and put under CommonLister-->
  <li class="columnItem">James</li>
  <li class="columnItem">Mary</li>
  <!--will be removed and put under CommonLister-->
</ul>
<h4>List 2</h4>
<ul id="listTwo">
  <li class="columnItem">John</li>
  <!--will be removed and put under CommonLister-->
  <li class="columnItem">Mark</li>
  <li class="columnItem">Mary</li>
  <!--will be removed and put under CommonLister-->
</ul>
<h4>Common List</h4>
<ul id="CommonLister">
</ul>

＆＃13;

将重复项放在Common Element JavaScript / Jquery下

1 个答案: