计算一个 div 中的 div 数量，在一页 wordpress 帖子上有多个父 div答案

【问题标题】：Counting number of divs within a div, with multiple parent divs on one page of wordpress posts计算一个 div 中的 div 数量，在一页 wordpress 帖子上有多个父 div
【发布时间】：2014-07-14 22:02:46
【问题描述】：

抱歉标题太复杂，让我试着解释一下。

我在类别页面上显示了 Wordpress 帖子。每个帖子都由一个 300 像素宽的 div 表示，其中包含特色图片。

在这个 div 的顶部，我有一个或多个彩色条。彩色条创建为 div。这些帖子将有不同数量的这些条...

<div class="post">
    <div class="colourbox">
        <div class="red" ></div>
        <div class="blue" ></div>
    </div>
</div>

<div class="post">
    <div class="colourbox">
        <div class="red"></div>
        <div class="blue"></div>
        <div class="yellow"></div>
    </div>
</div>

<div class="post">
    <div class="colourbox">
        <div class="red"></div>
    </div>
</div>

我发现了一个很酷的 jQuery 函数，它允许我根据父 div（颜色框）中可见 div 的数量来调整这些 div 的宽度

// select visible children
var visibleDivs = $('.colourbox div:visible');

// use whatever width calculation you'd like...
var targetWidth = 300 / visibleDivs.length - 1;

// apply the width to the divs
visibleDivs.width(targetWidth);

但是，这是计算页面上每个可见的 div，所以在这个例子中，所有这些条的宽度将是帖子 div 的 6 分之一，因为总共有 6 个 div

有谁知道我将如何使样式分别适用于每个帖子 div。我认为这可能是不可能的，因为 jQuery 接收的帖子没有任何区别。

我是否需要在 Wordpress 循环中进行计数，这将为每个帖子提供一个唯一的数字，我可以将其与一个类结合起来。

我认为这个小提琴为我指明了正确的方向 --- http://jsfiddle.net/geko/vXcgZ/

我的大脑刚刚停止运转。任何更多的建议都会很棒。也许有更简单的方法

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

您需要使用.each() 函数，然后该函数将选择每个父元素并仅对该单个元素的子元素进行数学运算。

试试这个

$('.colourbox').each(function(i) {
    // select visible children
    var visibleDivs = $(this).find('div').length;

    // use whatever width calculation you'd like...
    var targetWidth = 300 / visibleDivs.length - 1;

    // apply the width to the divs
    visibleDivs.width(targetWidth);
});

在此处阅读有关.each() 函数的更多信息：jQuery API Docs

【讨论】：

Uncaught TypeError: undefined is not a function custom.js:15 (anonymous function) custom.js:15 m.extend.each jquery-latest.min.js?ver=3.5.2:2 m.fn.m.each jquery-latest.min.js?ver=3.5.2:2（匿名函数）
尝试使用上面修改后的答案。
我也遇到了同样的错误，你是说抄袭你的人吗？ :)
哪一行是错误的？它说第 15 行，但上面的代码当然只有 10 行。
对不起，我现在得到了答案.... var visibleDivs = $(this).children('div');作品。我打电话给长度两次，我不需要。我会将您的问题标记为正确，因为它是我所需要的

【解决方案2】：

您必须使用.each() 函数，该函数将查看每个父元素并专门对该元素的子元素进行计算。

试试这个：

$('.colourbox').each(function(){

    var colourbox = $(this);
    var visibleDivs = colourbox.find('> div[class]:visible').length;

    // division by zero 
    if(!visibleDivs) 
        return;

    visibleDivs.width(300 / visibleDivs - 1);
});

【讨论】：