Question

我有一段jQuery代码，根据孩子的数量自动给出一个百分比宽度，直到你在子div中有更多的div，我怎么能得到这个忽略孩子里面的任何div＆＃34; .eaService＆＃34;并且只是给＆＃34; .eaService＆＃34;计算出的宽度。

脚本

$(document).ready(function () {
var el = $('.servCon .eaService');
var len = el.children().length;
if (len > 0) {
    len = 100 / len;
    el.css("width", len + "%");
}
});

HTML

<div class="servCon">
        <div class="eaService">
            <div class="imgPanel"><img src="someimage.jpg" alt="" />
            </div>
            <div class="pad">
                <h3>Sub Heading</h3>
                <p>At Smith Jones we are committed to forming close partnerships with our clients, enabling us to understand... Find our more</p>
            </div>
        </div>
        <div class="eaService">
            <div class="imgPanel"><img src="someimage.jpg" alt="" />
            </div>
            <div class="pad">
                <h3>Sub Heading</h3>
                <p>At Smith Jones we are committed to forming close partnerships with our clients, enabling us to understand... Find our more</p>
            </div>
        </div>
</div>

由于

Answer 1

使用var el = $('.servCon .eaService');，您同时选择.eaService divs

所以，当你致电var len = el.children().length;时，你得到了他们孩子的总和，在这种情况下它是4，所以你设置为。eaService宽度为25％;

您应该像以下一样修改您的代码：

$(document).ready(function () {
var el = $('.servCon');
var childs=$('.eaService');
var len = el.children().length;
if (len > 0) {
    len = 100 / len;
    childs.css("width", len + "%");
}
});

Answer 2

好吧，既然你在这里专门选择了.eaService的孩子，那么你难以对这些元素进行计数。

您正在做的是$(".servCon .eaService").children()，它首先选择所有的.eaService元素（在本例中为两个），然后找到这些元素的子元素。结果选择包括.imgPanel div和两个.pad div。

你可能意味着做的只是找到.servCon有多少个孩子。所以你想这样做：

var len = $(".servCon").children().length;

为了最大限度地简洁：

$(function(){
    $(".servCon").css("width", (100 / Math.max(1, $(".servCon").children().length)) + "%");
});

基于孩子的自动百分比宽度

2 个答案: