Question

我试图根据列表中包含的标签数量动态地给孩子A标签一个均匀的宽度。（例如，如果4 A它们都将是25％宽度，3个标签它们将是33％）。

我已经尝试计算div中的子数，并将100除以var数，但没有成功

的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>

Answer 1

你可以只使用CSS，而不计算元素的数量：

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

Answer 2

使用当前代码，如果有四个元素，则设置为：

width: 25;

我想你想要这个：

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

Answer 3

您可以使用此代码：

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)+"%");
});

Answer 4

尝试将jquery更改为：

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

Answer 5

<强> 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

Answer 6

我认为您不需要设置width百分比。因为您最终将使用javascript均匀分发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

Answer 7

Oriol answer是正确的，如果您不需要支持IE7 and below。

如果您需要支持这些浏览器，您可以像其他人已经解释过的那样计算相对宽度。

但是如果你知道你永远不会有超过 n 的孩子，你也可以这样做：

// 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');

和css

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

demo

统计孩子+改变CSS

7 个答案: