getting css properties from classes with jquery

Question

I have a set of div's generated by php, and they all have the same class. when I click one, it calls a jQuery function that gets its id (defined by MySQL database) and increases its size (height and width) by 110%. The problem i think I'm having, is when I retrieve its css properties by class, it gets the size of the first thing it sees with that class.

theres not much code to show, but its:

var height = parseInt($(".divClass").css("height"));
var width = parseInt($(".divClass").css("width"));

$(".divClass").css({"height":height + "px","width":width + "px"});
$("#" + id).css({"height":height * 1.1 + "px","width":width * 1.1 + "px"});

id is created when the function is called, and is the id of each individual div.

A: Am i even correct about my assumptions? B: How would i go about getting the css properties for the majority of elements with the same property instead of the first one. What is happening is when i click the first element, it, and the rest grow. Any help would be greatly appreciated.

You need to show your click event handling. If you're trying to get the clicked element's CSS, use this (or $(this)) — Ian
– Ian, Commented Feb 22, 2014 at 17:24
Please provide a jsfiddle.net , and please try to reformulate your question. If you want to target the clicked Div, you should do it like Nathan Dawson said (no need to change style to all the elements of a class), if you want the average height of all the divs then is something else. With a jsfiddle we can help :) — Lu Roman
– Lu Roman, Commented Feb 22, 2014 at 18:33

Nathan Dawson · Accepted Answer · 2014-02-22 17:24:45Z

5

My suggestion would be to do:

var height, width;

$('.divClass').click(function() {
    height = $(this).height();
    width = $(this).width();

    $(this).css({ 'height': ( height * 1.1 ) + 'px', 'width': ( width * 1.1 ) + 'px' });
});

I haven't tested my code by the way so let me know how it works for you and I'll tweak as necessary.

answered Feb 22, 2014 at 17:24

Nathan Dawson

19.4k3 gold badges59 silver badges60 bronze badges

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

6 Comments

Nathan Dawson Over a year ago

I noticed this was on click. I'll adjust accordingly now.

Nathan Dawson Over a year ago

Done. No ID is necessary when using "this"

Ozay34 Over a year ago

how would i call the function with onClick? Oh, nvm i just needed to reload the page

Nathan Dawson Over a year ago

You insert it in your JS. It uses a click handler so no onClick necessary.

Ozay34 Over a year ago

I just relised i have a bit more to the function, and first thing it does is call a .load() method which calls the rest of the function when it is finished, so i dont think this would work.

|

Collectives™ on Stack Overflow

getting css properties from classes with jquery

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related