Question

对于复杂的标题感到抱歉，让我试着解释一下。

我在类别页面上显示Wordpress帖子。每个帖子由300px宽的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（colourbox）中可见的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，所以在这个例子中，所有这些条的宽度将是post div的第6个，因为总共有6个div

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

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

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

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

Answer 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

Answer 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);
});

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

2 个答案: