选择jQuery by CSS属性

Question

我正试图通过CMS自动应用于该图像的CSS来选择一个图像，然后添加一个类。这是我的脚本：

$(document).ready(function() {
    if ($('.pageBody p img').css('float') === 'right') {
        $('.pageBody p img').addClass('float-right');
    }
});

该脚本适用于应用了float: right的图像。还有另一个应用了float: left的图像。问题是，如果我在脚本中从"右"切换到"左"，它就不会起作用。例如，如果我将图像设置为float: left并使用此脚本，则它不起作用：

$(document).ready(function() {
    if ($('.pageBody p img').css('float') === 'left') {
        $('.pageBody p img').addClass('float-left');
    }
});

Answer 1

只有当您感兴趣的图像是文档中的第一个图像时，您当前的代码才能工作。您可以使用filter（）来定位该图像，而不管它在DOM:中的位置如何

$(document).ready(function() {
    $(".pageBody p img").filter(function() {
        return $(this).css("float") == "left";
    }).addClass("float-left");
});

或者，您可以使用addClass（）的形式，它采用一个函数，根据float样式的值将float-left或float-right类添加到所有图像中：

$(document).ready(function() {
    $(".pageBody p img").addClass(function() {
        var direction = $(this).css("float");
        if (direction == "left" || direction == "right") {
            return "float-" + direction;
        } else {
            return "";
        }
    });
});