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

时间:2015-10-12 15:06:41

标签: javascript jquery jquery-ui z-index

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

所有div都位于主要div中,类.main-stack并且所有div都有类.card有几个.main-stack div。如果具有特定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的

我在这里缺少什么?

2 个答案:

答案 0 :(得分:1)

jQuery // Parse config Parse.enableLocalDatastore(this); ParseCrashReporting.enable(this); Parse.initialize(this, "[app key]", "[client key]"); ParseFacebookUtils.initialize(this); ParseInstallation parseInstallation = ParseInstallation.getCurrentInstallation(); ArrayList<String> channels = new ArrayList<>(); channels.add("global"); PushService.setDefaultPushCallback(getApplicationContext(), MainActivity.class); ParsePush.subscribeInBackground("", new SaveCallback() { @Override public void done(ParseException e) { Log.d("Application", "Subscribed to ParsePush"); } }); parseInstallation.put("channels", channels); parseInstallation.saveInBackground(); 函数可以获得2个参数。如果您传递 1 参数,则会调用get函数。如果您传递 2 参数,则会调用set function。

如果您更改下面的代码,则可以使用其中的代码。

.css()

您可以在此处获取有关$('.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 }); } }); 的更多信息。

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

答案 1 :(得分:1)

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