计算孩子数 + 更改 CSS答案

【问题标题】：Count children + change CSS计算孩子数 + 更改 CSS
【发布时间】：2013-10-18 04:46:06
【问题描述】：

我正在尝试根据列表中包含的标签数量动态地为子 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>

【问题讨论】：

"从 jQuery 1.8 开始不推荐使用 .size() 方法。改用 .length 属性。" - api.jquery.com/size
A 标记是内联元素。内联元素是其内容的宽度。您还需要将它们设为 inline-block 或 block。
是的，我让它们浮动，但是列表总是随着元素的数量而波动，因此我需要动态地为它们分配宽度以适应美学。为了简单起见，我放了最低限度的 CSS/HTML 来关注动态生成的宽度
100/numChildren 只是一个数字。你需要给它单位。

标签： javascript jquery css

【解决方案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

【讨论】：

+1 啊，你打了我 5 秒，因为我已经准备好了jsfiddle.net/3WJp2

【解决方案2】：

使用您当前的代码，如果有四个元素，您正在设置：

width: 25;

我想你想要这个：

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

【讨论】：

【解决方案3】：

尝试将 jquery 更改为：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

我认为您不需要以百分比设置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

【讨论】：

【解决方案6】：

您可以使用此代码：

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

【讨论】：

【解决方案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

【讨论】：