javascript - 通过 CSS 属性选择 jQuery

Question

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

$(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

只有当您感兴趣的图像是文档中的第一个图像时，您当前的代码才有效。无论图像在 DOM 中的位置如何，您都可以使用filter()来定位该图像：

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

或者，您可以使用addClass()的形式，它接受一个函数来添加float-left或float-right类到所有图像，具体取决于它们的float样式值：

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