jquery 使用特定的 z-index 添加 class 到 div

Question

我有几个 div 具有独特的 z 索引。现在我想将几个 classes 添加到具有特定 z-index 的 div。假设这个 div 的 z-index 是 5.

所有 div 位于主 div 和 class .main-stack 并且都有 class .card 有几个 .main-stack div。是否存在具有特定 z-index 的 div 都需要检查。如果找到，一些 classes 应该添加到那个 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');
    }
});

此代码的问题在于它将 class 添加到所有 div 而不是仅添加到 z-index = 5

我在这里错过了什么？

Answer 1

jQuery .css() 函数可以得到2个参数。如果传递1参数，就会调用get函数。如果您传递 2 参数，您将调用 set 函数。

如果您像下面这样更改代码，您可以获得一个有效的代码。

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

您可以在此处获得有关 .css() 的更多信息。

http://api.jquery.com/css/

Answer 2

if($(this).css('z-index', '5')) { 将设置元素的 z-index，css 将 return 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
            });
    }
});

jquery 使用特定的 z-index 添加 class 到 div

jquery add class to div with specific z-index

javascript

jquery

jquery-ui

z-index