Question

我已经完成了第一部分HTML和JavaScript / JQuery的编码。现在我想要使用JavaScript / JQuery来完成UL的最终公共列表。因此，最终的公共列表将被两个UL包围而不是一个。例如 最终结果

<ul id="CommonLister">
       <ul> <!--Need to add this-->
         <li class="columnItem">John</li>
         <li class="columnItem">Mark</li>
       </ul><!--Need to add this-->
</ul>

当前代码

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <div>
              <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>

          <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>
          <ul id="CommonLister">
            <li class="columnItem">John</li>
            <li class="columnItem">Mark</li>
          </ul>
        </div>

    $(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 $(

    <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"> 
    <!--Extra ul will be added here-->
    </ul>

Answer 1

将ul直接嵌套在这样的ul中是无效的，但如果必须，可以使用jquery wrapAll：

$( "li" ).wrapAll( "<ul></ul>" );

请参阅小提琴：https://jsfiddle.net/9xLt6d9f/

Answer 2

我同意charlietfl这样做似乎很奇怪。但是，要回答您的问题，强制使用格式不正确的HTML代码的最佳方法是将其硬编码到原始文件中。请尝试使用以下代码作为文件的末尾：

<h4>Common List</h4>
<ul id="CommonLister">
  <ul id="CommonListerSub"> 
<!--Extra ul will be added here-->
  </ul>
</ul>

然后，只需更改代码的一行：

var $mergeColumn = $('#CommonListerSub'); //Common list reference

这将强制它列出嵌套的ul标记下的列表项。

我希望这是一个可以接受的解决方案。如果由于某种原因它不起作用，请评论您有哪些附加限制，并可能共享给您提供所需模板或格式规范的页面链接。

使用JavaScript / JQuery添加额外的UL对

2 个答案: