Question

我有一个包含单个嵌套UL的LI元素，它将具有20-30个LI，并且一些LI将具有子UL。现在它是一个长滚动列表。我希望能够通过jQuery将UL分成三个UL，通过一组独特的LI选择器（例如，“li＃item-173，li＃item-169，li＃item-175”）来指示新UL应该开始的时间点。

所以，不要让父LI与子项UL为~30项。我希望有一个带有子DIV的父LI，并且在DIV内部，根据我提供的“分割点”，有三个具有不同数量项目的UL。

希望这是有道理的。

看看我想要实现的目标......

通过选择Industries＆amp; amp; amp; amp;以下链接中的资源菜单项：

http://new.efigroupllc.com

这是我想要实现的目标，但是需要通过DOM上的jQuery来实现，因为菜单列表是由服务于站点的CMS动态生成的。（再次，选择Industries＆amp; Resources菜单项）：

http://new.efigroupllc.com/biglist.html

以下是我的代码的当前状态......

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

以下是我在发布此编辑之前获得的代码。猜猜它会有助于发布它。： - /

“myCount”告诉我有22个项目（例如，长度属性）。但是，我的“each”函数中的警报仅触发第一个元素，而不是针对22个元素中的每个元素触发。由于我无法按照我想要的方式运行循环，因此我从未将其从第一个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
        }
    }
);

Answer 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);

Demo

<强>更新
wordpres中没有$。所以你必须使用jQuery。修改后的代码是 -

var $div = jQuery('<div class="industries-list-wrapper"/>');
var $pli = jQuery('a[href="/industries.html"]').closest('li');
var $ul1 = jQuery('a[href="/industries.html"]').next('ul');
$ul1.attr('style','float:left;');
var $lis = $ul1.children('li');
var $ul3 = jQuery('<ul style="float:left;"></ul>');
for (i = 21; i > 13; i--) {
    $ul3.prepend($lis[i]);
}
var $ul2 = jQuery('<ul style="float:left;"></ul>');
for (i = 13; i > 7; i--) {
    $ul2.prepend($lis[i]);
}
$div.append($ul1);
$div.append($ul2);
$div.append($ul3);
$pli.append($div);

Answer 2

我终于明白了。有时候，在意识到有一个非常优雅的解决方案之前，我会把生活中的生活复杂化。经过进一步的实验，我发现 slice 方法正好给了我所需要的东西。这是我最终做的......

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');

在指定的LI元素处将UL分成多个UL

2 个答案: