[英]reorder ul based on li class
I am sure this is very simple but sadly I am not seeing it right now. 我确信这很简单,但可惜我现在没有看到它。 I have a menu with list items. 我有一个带有列表项的菜单。 some of them have a class col-1 and the others have a class of col-2. 其中一些具有col-1类,另一些具有col-2类。 I am trying to loop through each list item and separate them into two new <ul>'s
and then replace this <ul>
with the two new <ul>'s
. 我试图遍历每个列表项并将它们分为两个新的<ul>'s
,然后将该<ul>
替换为两个新的<ul>'s
。
here is my current html: 这是我当前的html:
<ul>
<li id="nav-menu-item-27594" class="col-1 col-header menu-item menu-item-type-custom menu-item-object-custom ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-26963" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27030" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27595" class="col-2 col-header menu-item menu-item-type-custom menu-item-object-custom ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27220" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-25885" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-25922" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#"><a href="#">Blah</a></a>
</li>
</ul>
Here is the output I would like to achieve: 这是我想要实现的输出:
<ul>
<li>
<ul class="col-1">
<li id="nav-menu-item-27594" class="col-1 col-header menu-item menu-item-type-custom menu-item-object-custom ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-26963" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27030" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
</ul>
</li>
<li>
<ul class="col-2">
<li id="nav-menu-item-27595" class="col-2 col-header menu-item menu-item-type-custom menu-item-object-custom ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-27220" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-25885" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#">Blah</a>
</li>
<li id="nav-menu-item-25922" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
<a href="#"><a href="#">Blah</a></a>
</li>
</ul>
</li>
</ul>
I know I need to replace the contents of the ul with the new li's but I don't think I am even using the right approach at this point. 我知道我需要用新的li替换ul的内容,但是我现在还没有使用正确的方法。
You might do it like this: 您可以这样做:
$('ul') .append($('<li>').append($('<ul class="col-1">').append($('ul .col-1')))) .append($('<li>').append($('<ul class="col-2">').append($('ul .col-2'))))
ul { border: solid 1px; margin: 4px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li id="nav-menu-item-27594" class="col-1 col-header menu-item menu-item-type-custom menu-item-object-custom "> <a href="#">Blah</a> </li> <li id="nav-menu-item-26963" class="col-1 menu-item menu-item-type-post_type menu-item-object-page "> <a href="#">Blah</a> </li> <li id="nav-menu-item-27030" class="col-1 menu-item menu-item-type-post_type menu-item-object-page "> <a href="#">Blah</a> </li> <li id="nav-menu-item-27595" class="col-2 col-header menu-item menu-item-type-custom menu-item-object-custom "> <a href="#">Blah</a> </li> <li id="nav-menu-item-27220" class="col-2 menu-item menu-item-type-post_type menu-item-object-page "> <a href="#">Blah</a> </li> <li id="nav-menu-item-25885" class="col-2 menu-item menu-item-type-post_type menu-item-object-page "> <a href="#">Blah</a> </li> <li id="nav-menu-item-25922" class="col-2 menu-item menu-item-type-post_type menu-item-object-page "> <a href="#"><a href="#">Blah</a></a> </li> </ul>
Try jQuery.appendTo()
. 试试jQuery.appendTo()
。 No explicit looping and temp arrays necessary, since this will move the matching elements from one container to another. 不需要显式的循环和临时数组,因为这会将匹配的元素从一个容器移动到另一个容器。
$('ul > li.col-1').appendTo('ul.parent > ul.first'); $('ul > li.col-2').appendTo('ul.parent > ul.second');
ul.first { background-color: lightgray; } ul.second { background-color: lightgreen; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li id="nav-menu-item-27594" class="col-1 col-header menu-item menu-item-type-custom menu-item-object-custom "> <a href="#">Blah</a> </li> <li id="nav-menu-item-26963" class="col-1 menu-item menu-item-type-post_type menu-item-object-page "> <a href="#">Blah</a> </li> <li id="nav-menu-item-27030" class="col-1 menu-item menu-item-type-post_type menu-item-object-page "> <a href="#">Blah</a> </li> <li id="nav-menu-item-27595" class="col-2 col-header menu-item menu-item-type-custom menu-item-object-custom "> <a href="#">Blah</a> </li> <li id="nav-menu-item-27220" class="col-2 menu-item menu-item-type-post_type menu-item-object-page "> <a href="#">Blah</a> </li> <li id="nav-menu-item-25885" class="col-2 menu-item menu-item-type-post_type menu-item-object-page "> <a href="#">Blah</a> </li> <li id="nav-menu-item-25922" class="col-2 menu-item menu-item-type-post_type menu-item-object-page "> <a href="#"><a href="#">Blah</a></a> </li> </ul> <ul class="parent"> <ul class="first"></ul> <ul class="second"></ul> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.