CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MIke
MIke

Reputation: 619

counting class using jquery then multiply the value to the width for the class

I need some help on how to set the width of my wrapper on how many class does my content have.

i have some fiddle here that gets the value of the class but i dont know how to implement it to make my width multiply on how many does the class matches.

CONTENT: 
<div id='myDiv'>
    <img src='' class='class' />
    <img src='' class='class' />
    <img src='' class='class' />
</div>
 <img src='' class='class' />


CSS:
#myDiv { width: 200px; border: 1px solid red; height: 200px; }
.class { width: 200px; border: 1px solid blue; height: 200px; }


SCRIPT:
var numItems = $('#myDiv .class').length;
alert(numItems);

now what I need to do is for every .class that is there on the content. I need to multiply it to the width of the #mydiv.in this case i need a 600px width for the #myDiv css

--Update

I now have the counting query the problem is its working on the fiddle but when i transfer it to my local it doesn't work.

FIddle Here

Upvotes: 0

Views: 196

Answers (1)

empiric
empiric

Reputation: 7878

var numItems = $('#myDiv .class').length; //get the number of .class in #myDiv
var orig_width = $('#myDiv').width(); //get the original width of #myDiv
//use .outerWidth() here when you want to include padding and border
var new_width = numItems*orig_width; //multiply it with the number of .class

$('#myDiv').css('width', new_width+'px'); //set the new width to #myDiv

Demo

Reference

.width()

.outerWidth()

.css

Upvotes: 2

Related Questions