CODEWITHSUNDEEP
javascriptjquerycss
user934902
user934902

Reputation: 1204

Count children + change CSS

I am trying to dynamically give child A tags an even width based on the number of tags contained in a list. (eg. if 4 A's they will all be 25% width, 3 tags they will be 33%).

I have tried counting the number of children inside the div and dividing 100 by the var number with no success

jQuery

 var numChildren = $("div a").size()
    $('a').css({ width : 100/numChildren });

CSS

a { width: /*DYNAMIC*/ (all even) }

div {width: 100%; }

HTML

<div>
 <a></a>
 <a></a>
 <a></a>
 <a></a>
</div>

Upvotes: 0

Views: 632

Answers (7)

Jose Rui Santos
Jose Rui Santos

Reputation: 15319

Oriol's answer is the correct one, if you don't need to support IE7 and below.

If you need support for these browsers, you can calculate the relative width as others already explained.

But if you know that you will never have more than n children, you can also do:

// assuming that will never have more than 4 children
$('div:has(a)').addClass('one');
$('div:has(a+a)').addClass('two');
$('div:has(a+a+a)').addClass('three');
$('div:has(a+a+a+a)').addClass('four');

and the css

div a       { width: 100%; }
div.two a   { width: 50%; }
div.three a { width: 33.3%; }
div.four a  { width: 25%; }

demo

Upvotes: 0

Oriol
Oriol

Reputation: 288080

You can do it CSS-only, without counting the number of elements:

HTML:

<div class="wrapper">
    <a></a>
    <a></a>
    <a></a>
</div>

CSS:

.wrapper {
    display: table;
    width: 100%;
    height: 50px;
    margin: 10px 0;
}
.wrapper > a {
    display: table-cell;
    border: 1px solid #000;
}

Demo

Upvotes: 1

Donovan Charpin
Donovan Charpin

Reputation: 3397

You can use this code :

jsFiddle here

HTML

<div id="content">
 <a></a>
 <a></a>
 <a></a>
 <a></a>
</div>

CSS

#content{
    width:100px;
    height:20px;
    background:#888;
}

a{
    height:20px;
    background:red;
    display:block;
    float:left;
}

jQuery

$(document).ready(function(){
    var numberChild = $("#content a").length;
    $("#content a").css("width",(100/numberChild)+"%");
});

Upvotes: 0

Jashwant
Jashwant

Reputation: 28995

I don't think you need to set width in percentage. As you are ultimately going to use javascript to evenly distribute width

HTML:

<div>
 <a>One</a>
 <a>Two</a>
 <a>Three</a>
 <a>Four</a>
</div>

Javascript:

var parent =  $("div");
var anchors = parent.find('a');
anchors.css({ width : parent.width() / anchors.length });

CSS:

div > a {
    background: red;
    display: inline-block;
}

Demo

Upvotes: 0

Harsha Venkataramu
Harsha Venkataramu

Reputation: 2904

HTML

<div>
 <a>Test Me</a>
 <a>Test Me</a>
 <a>Test Me</a>
 <a>Test Me</a>
</div>

JAVASCRIPT

var numChildren = $("div a").length;
$('a').css({ width : 100/numChildren+'%' });
alert(100/numChildren);

CSS

div
{
    width:300px;
}
a
{
    position:relative;
    float:left;
    background-color:#EEE;
}

JSFIDDLE LINK

Upvotes: 0

123
123

Reputation: 525

Try changing the jquery to:

 var numChildren = $("div a").length;
    $('a').css({ 'width', 100/numChildren + '%' });

Upvotes: 0

Jason P
Jason P

Reputation: 27012

With your current code, if there are four elements, you are setting this:

width: 25;

I think you want this:

$('a').css({ width : 100/numChildren + '%' });

Upvotes: 0

Related Questions