Javascript 在指定的LI元素处将UL拆分为多个ULs

我有一个LI元素，其中包含一个嵌套的UL，该UL将有20-30个LIs，并且一些LIs将有子UL。现在它是一个长长的滚动列表。我希望能够通过jQuery将UL拆分为三个UL，方法是传递一组唯一的LI选择器，例如liitem-173、liitem-169、liitem-175，以指示新UL应开始的点

因此，与其让父母李某和孩子UL约30件物品。我希望有一个具有子DIV的父LI，在该DIV内，根据我提供的分割点，有三个具有不同数量项目的ul

希望这是有意义的

看看我想要实现什么

通过选择以下链接中的“行业和资源”菜单项，可以查看整体列表：

这是我想要实现的，但需要通过jQuery on DOM ready来实现，因为菜单列表是由服务于站点的CMS动态生成的。再次选择“行业和资源”菜单项：

这是我的代码的当前状态

我的问题是使用每个方法迭代容器UL中的LI元素

下面是我在发布此编辑之前获得的代码。我想把它贴出来会有帮助的-/

myCount告诉我有22项，例如长度属性。但是，my each函数中的警报仅在第一个元素上触发，而不是在22个元素中的每个元素上触发。因为我无法让循环按我想要的方式工作，所以我从未真正将LIs从第一个UL移除/附加到第二个或第三个UL

这是到目前为止的代码，但是我仍然对它感到困惑

var targetId = 'item-7';
var col2startId = 'item-168';
var col3startId = 'item-174';
// get all of the wrapper pieces in place!
// -- add wrapper
jQuery('li#' + targetId + ' > ul').wrap('<div class="industries-list-wrapper">');
// -- add ULs and assign IDs!
jQuery('li#' + targetId + ' div.industries-list-wrapper > ul').attr('id',targetId + 'col1');
jQuery('li#' + targetId + ' div.industries-list-wrapper').append('<ul id="' + targetId + 'col2">');
jQuery('li#' + targetId + ' div.industries-list-wrapper').append('<ul id="' + targetId + 'col3">');
// iterate over the source ULs LI elements, move LI element to columns as appropriate
var thisColumn = 1;
var myCount = jQuery('ul#'+targetId+'col1 > li').length;
alert('there are ' + myCount + ' LIs in the list!');
jQuery('ul#'+targetId+'col1 > li').each(
    function() {
        // check for trigger's to set column
        myCurrentId = jQuery(this).attr('id');
        alert('myCurrentId = ' + myCurrentId);      
        if (jQuery(this).attr('id') == col2startId) {
            thisColumn = 2;
            alert('starting column 2!');
        } else if (jQuery(this).attr('id') == col3StartId) {
            thisColumn = 3;
            alert('starting column 3!');
        }
        if (thisColumn == 2) {
        // append jQuery(this) to column 2 and remove from column 1
        } else if (thisColumn == 3) {
        // append jQuery(this) to column 3 and remove from column 1
        }
    }
);

---

你可以试试这个。我使用的是索引号，所以如果你在biglist中添加了新的列表项，你也必须更改索引。这是密码-

var $div = $('div.industries-list-wrapper');
var $ul1 = $div.find('ul').first();
$ul1.attr('style', 'float:left;');

var $lis = $ul1.children('li');
console.log($lis);
var $ul3 = $('<ul style="float:left;"></ul>');
for (i = 21; i > 13; i--) {
    $ul3.prepend($lis[i]);
}
var $ul2 = $('<ul style="float:left;"></ul>');
for (i = 13; i > 8; i--) {
    $ul2.prepend($lis[i]);
}
$div.append($ul2);
$div.append($ul3);

---

我终于明白了。有时，在意识到有一个非常优雅的解决方案之前，我会把生活复杂化。经过进一步的实验，我发现切片法正好满足了我的需要。这就是我最后要做的

var targetId = 'item-7';
var col2startIdx = 8;
var col3startIdx = 14;

// get all of the wrapper pieces in place!
// -- add wrapper
jQuery('li#' + targetId + ' > ul').wrap('<div class="industries-list-wrapper">');

// -- add ULs and assign IDs!
jQuery('li#' + targetId + ' div.industries-list-wrapper > ul').attr('id',targetId + '-col1');
jQuery('li#' + targetId + ' div.industries-list-wrapper').append('<ul id="' + targetId + '-col2">');
jQuery('li#' + targetId + ' div.industries-list-wrapper').append('<ul id="' + targetId + '-col3">');

// -- slice up col1 into col2 and col3
// -- did the last column first, to make it easier for specifying an index value
jQuery('ul#'+targetId+'-col1 > li').slice(col3startIdx).appendTo('ul#'+targetId+'-col3');
jQuery('ul#'+targetId+'-col1 > li').slice(col2startIdx).appendTo('ul#'+targetId+'-col2');

---

发布你的HTML和你在问题中尝试过的JavaScript。谢谢你的想法。我遇到的问题是迭代容器UL中的LI元素。

var targetId = 'item-7';
var col2startIdx = 8;
var col3startIdx = 14;

// get all of the wrapper pieces in place!
// -- add wrapper
jQuery('li#' + targetId + ' > ul').wrap('<div class="industries-list-wrapper">');

// -- add ULs and assign IDs!
jQuery('li#' + targetId + ' div.industries-list-wrapper > ul').attr('id',targetId + '-col1');
jQuery('li#' + targetId + ' div.industries-list-wrapper').append('<ul id="' + targetId + '-col2">');
jQuery('li#' + targetId + ' div.industries-list-wrapper').append('<ul id="' + targetId + '-col3">');

// -- slice up col1 into col2 and col3
// -- did the last column first, to make it easier for specifying an index value
jQuery('ul#'+targetId+'-col1 > li').slice(col3startIdx).appendTo('ul#'+targetId+'-col3');
jQuery('ul#'+targetId+'-col1 > li').slice(col2startIdx).appendTo('ul#'+targetId+'-col2');