javascript - jquery 将类添加到具有特定 z-index 的 div

Question

我有几个具有独特 z-index 的 div。现在我想向具有特定 z-index 的 div 添加几个类。假设这个 div 的 z-index 是 5。

所有的 div 都位于主 div 中，类为 .main-stack 并且所有的类都为 .card 有几个 .main-stack 分区。需要检查具有特定 z-index 的 div 是否存在。如果找到，则应将一些类添加到该 div。

我有以下半工作代码:

$('.main-stack').each(function () {
    if ($(this).css('z-index', '5')) {
        $('.main-stack .card')
            .addClass('ui-front')
            .removeClass('flipped')
            .removeClass('ui-draggable-disabled')
            .removeClass('ui-droppable-disabled')
            .draggable({
                disabled: false
            })
            .addClass('top-card');
    }
});

这段代码的问题是它将类添加到所有 div 而不是只添加到 z-index = 5 的 div

我在这里错过了什么？

Answer 1

if($(this).css('z-index', '5')) { 将设置元素的 z-index 和 css 将返回 jQuery 对象，因此它的计算结果始终为 true。

要检索和比较 z-index 使用

if($(this).css('z-index') == 5) {

---

为了提高性能，您可以使用 addClass 添加多个类并使用 removeClass 删除多个类

$('.main-stack').each(function () {
    if ($(this).css('z-index') == 5) {
        $('.main-stack .card')
            .addClass('ui-front top-card')
            .removeClass('flipped ui-draggable-disabled ui-droppable-disabled')
            .draggable({
                disabled: false
            });
    }
});