将z索引按升序/降序动态分配给某个类的未知数量的元素

Dynamically assign z-index in ascending/descending order to unknown number of elements with a certain class

本文关键字：未知数 元素 动态分配 索引 升序 降序      更新时间：2023-09-26

我有一个.book类的元素，它包含随机数目的.page类元素。

<div class='book'>
    <div class='page'></div>
    <div class='page'></div>
    <div class='page'></div>
    <div class='page'></div>
    <div class='page'></div>
</div>

.pages像书中的页面一样排列在彼此之上，因此第一个.page元素需要具有最高的z索引，该索引等于.book中.page元素的数量。

目前，我在CSS中手动分配每个.page的z索引，但我希望有更多的灵活性
有没有办法计算.book中.page元素的数量，并使用javascript适当地动态分配z-index？我也希望相反的情况发生。当.page被翻转时，我希望z索引顺序以相反的顺序分配给它。

示例：
正常：

<div class='book'>
    <div class='page' style='z-index: 5'></div>
    <div class='page' style='z-index: 4'></div>
    <div class='page' style='z-index: 3'></div>
    <div class='page' style='z-index: 2'></div>
    <div class='page' style='z-index: 1'></div>
</div>

前三个.page翻转：

<div class='book'>
    <div class='page flipped' style='z-index: 1'></div>
    <div class='page flipped' style='z-index: 2'></div>
    <div class='page flipped' style='z-index: 3'></div>
    <div class='page' style='z-index: 2'></div>
    <div class='page' style='z-index: 1'></div>
</div>

我对jQuery没意见。

JSFIDDLE

更新：
每个人的答案在简化的测试用例中都能正常工作，但当我在原始工作中使用它时，"z索引"顺序似乎没有更新
Fiddle：http://jsfiddle.net/jklm313/HwR9c/(无需您的代码(
我正在使用jQuery在点击'.page'元素时切换.flipped类：

$('.page').click(function() {
    $(this).toggleClass('flipped');
});

这是我将其应用于的地方，请随时使用：
响应式书籍版式
预订

要按顺序分配给未翻转的元素，这应该做到：

var max = $('div.book div.page:not(.flipped)').length;
$('div.book div.page:not(.flipped)').each(
    function() {
        $(this).css('z-index', max--);
    }
);

然后，分配给翻转的元素：

var count = 0;
$('div.book div.flipped').each(
    function() {
        $(this).css('z-index', ++count);
    }
);

由于你在一个页面上有多个图书元素，那么你会以不同的方式构建它：

$('div.book').each(
    function() {
        var max = $(this).children('div.page:not(.flipped)').size();
        $(this).children('div.page:not(.flipped)').each(
            function() {
                $(this).css('z-index', max--);
            }
        );
        var count = 0;
        $(this).children('div.flipped').each(
            function() {
                 $(this).css('z-index', ++count);
            }
        );
    }
);

当你点击书本时，要使其重新分配，请将上述代码放入一个函数中，并在书本点击事件中调用该函数，如下所示：

// Slightly modified to work properly, and calls the index function
$('.page').click(function() {
    $(this).removeClass('no-anim').toggleClass('flipped');
    e.stopPropagation();
    indexPages();
});
// Putting zindex assignment into a function for reuse
function indexPages() {
  $('div.book').each(
        function() {
            var max = $(this).children('div.page:not(.flipped)').size();
            $(this).children('div.page:not(.flipped)').each(
                function() {
                    $(this).css('z-index', max--);
                }
            );
            var count = 0;
            $(this).children('div.flipped').each(
                function() {
                     $(this).css('z-index', ++count);
                }
            );
        }
    );
}

这也适用：

$(".book").each(function(){
    var pages=$(this).find(".page")
    var pages_flipped=$(this).find(".flipped")
    pages.each(function(){
        $(this).css("z-index",pages.length-pages.index($(this)))
    })
    pages_flipped.each(function(){
        $(this).css("z-index",pages_flipped.index($(this))+1)
    })    
})

至于您的更新，正确的代码是：

$('.page').click(function() {
    $(this).removeClass('no-anim').toggleClass('flipped');
    e.stopPropagation();
});

如果没有，您将添加一个在页面点击之前执行的处理程序，它将停止点击事件传播

这里是

记住，我从0开始，所以如果你想提高它，你必须像一样

zIndex: i + 1

这是jquery

$(function() {
$(".book").each(function() {
    $(this).find("div").each(function(i) {
        if ($(this).is(".flipped")) {
            $(this).css({
                zIndex: i
            });
        } else {
            $(this).css({
                zIndex: $(this).parent().find("div").length - i
            });
        }
    });
});
});

http://jsfiddle.net/honk1/L8E8a/1/

是否要查找更少的行？

$(".book").each(function() {
    $(this).find("div").each(function(i) {
        var level = $(this).is(".flipped") ? i : ($(this).parent().find("div").length - 1) - i;
        $(this).css("zIndex", level);
    });
});

http://jsfiddle.net/honk1/L8E8a/3/

编辑

稍等：

$(".book").each(function() {
    $(this).find("div").each(function(i) {
        $(this).css("zIndex", $(this).is(".flipped") ? (i + 1) : $(this).parent().find("div").length - i);
    });
});

http://jsfiddle.net/honk1/L8E8a/5/

：(

相关文章：