-2

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

因此，不要让父 LI 具有约 30 个项目的子 UL。我希望有一个带有子 DIV 的父 LI，并且在该 DIV 内部，根据我提供的“拆分点”，三个具有不同数量项目的 UL。

希望这是有道理的。

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

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

http://new.efigroupllc.com

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

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

这是我的代码的当前状态...

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

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

“myCount”告诉我有 22 个项目（例如，长度属性）。但是，我的“每个”函数中的警报仅在第一个元素上触发，而不是为 22 个元素中的每一个触发。因为我无法让循​​环按照我想要的方式工作，所以我从来没有真正将 LI 从第一个 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
        }
    }
);
4

2 回答 2

0

我终于弄明白了。有时，在意识到有一个非常优雅的解决方案之前，我会把生活复杂化。在进一步实验之后，我发现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');
于 2013-11-07T02:40:35.473 回答
0

你可以试试这个。我为此使用了索引号，因此如果您将新列表项添加到 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);
于 2013-11-06T07:24:50.353 回答