jQuery: How can I set css with own width?

Question

I'm trying to set some labels right property so that I can change it on mouse over.

The reason I'm doing this via jQuery is because each one has a different size which doesn't allow to do it via CSS.

This is what I have:

$('#vertical-navigation .label').css('right', $(this).width());

Which, of course, doesn't work, because $(this) is returning what I believe to be the window width.

How can I set the right position with the element own width, for each one?

A. Wolff · Accepted Answer · 2016-07-28 11:54:52Z

4

You can use function parameter like this:

$('#vertical-navigation .label').css('right', function(){
    return $(this).width() + 'px';
});

Now depending your HTML markup, this could just be enough:

$('#vertical-navigation .label').css('right', '100%');

answered Jul 28, 2016 at 11:49

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

1 Comment

nice, didn't know you could use a function like that

Pete · Accepted Answer · 2016-07-28 11:51:45Z

1

Do it in an each loop then you can use this:

$('#vertical-navigation .label').each(function() {
    var label = $(this);
    label.css('right', label.width() + 'px');
});

answered Jul 28, 2016 at 11:50

Pete

58.8k31 gold badges132 silver badges188 bronze badges