0

我有这个漂亮的 jquery 脚本，它包含lis 列表并将它们分组到ul4li个以下。

但是有些lis 有一个特殊的类：<li class="prefslidefeatured">

我希望这个特殊的 li 保持在列表的顶部，因此在第一个 ul 中作为第一个 li。可以有几个被标记为特色的列表，所以我希望它们都留在列表的开头，因此首先是 ul。

我是否可以轻松修改此脚本以适应此新功能？任何想法如何实现这一目标？

我还制作了 jsfiddle 进行快速肮脏测试:) http://jsfiddle.net/sandrodz/5at2G/

//This is for footer slider, it rewrites 1 ul into several uls that contain 4 li max.
$(document).ready(function(){

    // get the container, useful for later too...
    var container = $(".prefooterslides");

    // get all available UL and LI elements...
    var li_elements = container.find("LI").clone();

    // remove the current content so that we can rebuild it for the slider...
    container.find("UL").remove();

    // build the slider container...
    var slide_container = $("<div />");
    slide_container.addClass("slides_container");

    // tricky part: looping through the LI's and building each of the slides...
    // first create some helpful variables...
    var li_elements_per_slide = 4;
    var li_counter = 0;
    // create the first slide, with a UL to hold the LI's...
    var current_li_div = $("<div />");
    current_li_div.append($("<ul />"));

    // loop through the LI's...
    li_elements.each(function(index, element){

        li_counter++;
        var current_li = $(element).clone();
        current_li_div.find("UL").append(current_li);

        if (li_counter % li_elements_per_slide == 0)
        {
            // we've hit 4 in this list, so add the slide and make
            // a new one, using same code as before...
            container.append(current_li_div);
            current_li_div = $("<div />");
            current_li_div.append($("<ul />"));
        }

    });

    // we might have an uneven number of LI's, so we need to check for this...
    if (li_counter % li_elements_per_slide != 0)
        container.append(current_li_div);

    // all that's left to do is to initialise the slider script...
    $("#prefooterindex").slides({
        container: 'prefooterslides',
        generatePagination: false
    });

});
4

1 回答 1

0

尝试这个：

改变：

var li_elements = container.find("LI").clone();

至：

var li_elements = container.find("LI.prefslidefeatured").clone();
li_elements = li_elements.add(container.find('LI:not(.prefslidefeatured)').clone());

它首先获取所有的特征lis，然后将所有非特征lis 添加到数组的末尾。现在.each()进一步向下迭代首先遍历特色项目，这意味着它们被添加到最顶部的uls 中。

小提琴：http: //jsfiddle.net/5at2G/1/

于 2012-07-23T20:13:31.647 回答