通过CSS属性选择jQuery

Question

I am trying to select an image by the CSS that is automatically applied through a CMS to that image and then add a class. Here is my script:

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

That script works just fine with an image that has float: right applied. There is another image that has float: left applied. The problem is, if I switch "right" to "left" in the script than it wont' work. For example, if I have an image set to float: left and use this script than it doesn't work:

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

Answer 1

Your current code will only work if the image you're interested in is the first one in the document. You can use filter() to locate that image regardless of its position in the DOM:

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

Alternatively, you can use the form of addClass() that takes a function to add float-left or float-right classes to all the images depending on the value of their float style:

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