CODEWITHSUNDEEP
javascriptjqueryhtmlcss
whaaaaaaz
whaaaaaaz

Reputation: 39

Jquery: different width for child divs with same parent and child classes, based on number of child divs

Noob at jquery, and keep struggling with isolating divs.

Got a few parent divs with different number of child divs. Trying to set child divs width, based on number of child divs in each parent div. My script keeps counting them all, and not each parent separately.

html for it would be

<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
</div>
<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>

and jquery

$(".parent").each(function(){  
  var prodchildren = $(".parent").children().length;
   if (prodchildren > 1) { $(".child").css('width','49%'); }
   if (prodchildren > 2) { $(".child").css('width','33%'); }
   if (prodchildren > 3) { $(".child").css('width','24.5%'); }
   if (prodchildren > 4) { $(".child").css('width','19.5%'); }
});

Upvotes: 0

Views: 1257

Answers (3)

ddlab
ddlab

Reputation: 930

I guess, that width of 100% NOT just should be devided by number of children. Since is it possible to work with decimal numbers in percents I would calculate this all including a 0.5% margin (guess this is what whaaaaz wants to).

so style in css:

.parent > .child {margin-left:0.5%}
.parent > .child:last-child {margin-right:0.5%}

and calculate with jquery:

$(".parent").each(function(){
    var children = $(this).children().length;
    var child_width = ((100-0.5-(0.5*children)) / children).toFixed(3);
    $(this).children().css("width", child_width + "%");
})

Upvotes: 0

somethinghere
somethinghere

Reputation: 17358

First off, your HTML and JS don't match up. Heres a way to do it in jQuery, though, and its quite simple. For the following HTML:

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

You can use this script:

$(".parent").each(function(){
    // instead of using if, why don't you just calculate it?
    // first, check the width of a child by dividing 100 by the amount of children
    var child_width = 100 / $(this).children().length;
    // then, round it to the below number so you get a nice round number and the total doesnt exceed 100 
        child_width = Math.floor(child_width);
    // the $(this) selector represents the current .parent
    $(this).children().css("width", child_width + "%");
})

Upvotes: 3

chead23
chead23

Reputation: 1879

Use $(this) to get the current item in the iteration.

$(".basecollections").each(function(){  
  var prodchildren = $(this).children().length;
   if (prodchildren > 1) { $(".product777").css('width','49%'); }
   if (prodchildren > 2) { $(".product777").css('width','33%'); }
   if (prodchildren > 3) { $(".product777").css('width','24.5%'); }
   if (prodchildren > 4) { $(".product777").css('width','19.5%'); }
});

Upvotes: 3

Related Questions