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

Question

我完成了第一部分 HTML 的编码，然后是 JavaScript/JQuery。现在我想用 UL 包围最终的公共(public)列表，需要使用 JavaScript/JQuery 完成。所以最终的公共(public)列表将被两个 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>" );

参见 fiddle :https://jsfiddle.net/9xLt6d9f/