Select jQuery by CSS attribute

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');
    }
});

If it works with right, and not left, are you sure it actually has that style applied. — adeneo
– adeneo, Commented Feb 13, 2013 at 15:36
Is the other image inside a tag with the pageBody class wrapped inside a p tag? — Darren
– Darren, Commented Feb 13, 2013 at 15:37
Can you print out the CSS value by doing something like console.log($('.pageBody p img').css('float')), it should give you enough information. — Rubens Mariuzzo
– Rubens Mariuzzo, Commented Feb 13, 2013 at 15:37

Frédéric Hamidi · Accepted Answer · 2013-02-13 15:46:37Z

5

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 "";
        }
    });
});

edited Feb 13, 2013 at 15:46

answered Feb 13, 2013 at 15:38

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user715564 Over a year ago

Brilliant. Thanks for the help. I can't accept your answer for seven minutes but as soon as I can I will.

Mark Schultheiss Over a year ago

or wack it with each:

return ($(this).css("float") == "left" || $(this).css("float") == "right"); }).each(function () {     $(this).addClass("float-" + $(this).css("float")); });

nice answer btw

Collectives™ on Stack Overflow

Select jQuery by CSS attribute

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related