Javascript 第n个子脚本样式

我目前正在应用基于第2个孩子身高总和的css类，例如，如果第2个孩子的身高+第3个孩子的身高等于x，则添加特定的类

这是我要计算的javascript-

$(function() {
var fl = $('ul img:nth-child(3n+3)').height();
var fr = $('ul img:nth-child(3n+4)').height();
var result = fl += fr;
if (result == 1092) {
    $('ul img:nth-child(3n+3)').addClass('style1a');
    $('ul img:nth-child(3n+4)').addClass('style1b');
}
else if (result == 2460) {
    $('ul img:nth-child(3n+3)').addClass('style2a');
    $('ul img:nth-child(3n+4)').addClass('style2b');
}
else if (result == 1776) {
    $('ul img:nth-child(3n+3)').addClass('style3a');
    $('ul img:nth-child(3n+4)').addClass('style3b');
}
});

这几乎可以完美地工作，它计算3n+3和3n+4的第一次迭代的高度，并将样式应用于所有3n+3

但是，我需要修改javascript来计算3n+3和3n+4的每次迭代的高度，而不仅仅是第一次迭代，然后应用样式

li（3）+li（4）之和添加样式，li（6）+li（7）之和添加样式

---

提前谢谢

这似乎不是解决这个问题的干净方法。首先，依赖精确的高度可能真的很麻烦，因为如果一个像素发生变化，代码就会被抛出。考虑在元素上使用小于/大于vs等于或设置类。此外，还应该声明一次jQuery变量。快速重构：

$(function() {
var foo = $('ul img:nth-child(3n+3)');
var bar = $('ul img:nth-child(3n+4)');

switch(foo.height() + bar.height()) {
  case == 1092: 
  // You really should avoid relying on exact heights
  // Maybe try some other method to determine style
    foo.addClass('style1a');
    bar.addClass('style1b');
    break;
  case == 2460:
    foo.addClass('style2a');
    bar.addClass('style2b');
    break;
  case == 1776:
    foo.addClass('style2a');
    bar.addClass('style3b');
    break;
}

---

$返回元素的集合（即使只有一个匹配元素，它仍会放入集合中）。因为$总是返回一个集合，如果jQuery认为合适，它会查找集合的第一个成员的属性/方法；each（）是您想要用来避免这种行为的

函数体的前几行应该是：

var height;
$('ul img:nth-child(3n+3)').each(function(index, element) {
    height += element.height;
}
$('ul img:nth-child(3n+4)').each(function(index, element) {
    height += element.height;
}

---

在同一行上使用=和+=计算结果的方式是奇怪的，尽管这段代码会处理这一点。

因为需要分别处理每对元素，所以需要在集合上循环。大概是这样的：

我不太理解您的问题。我看不到这里的整个场景，所以一个简单的演示可能会有所帮助。当前的演示--正如你所看到的，照片没有正确地并排排列，因为应用了错误的类。它是在第一个（3n+3）+（3n+4）的基础上应用样式的，这就是为什么它工作得很好@无望的“如果第二个孩子的身高+第三个孩子的身高等于x以上，添加特定类别”从您发布的内容中，您的代码正在检查第二个孩子的身高+第三个孩子的身高是否等于x。抱歉，我头脑中正在研究一个旧版本，但同样的原则适用看起来适用于哪个类别取决于身高，因此，在此处使用选择器

n子项

可能没有帮助，甚至会让人困惑。我猜您必须循环查看所有的

img

（当然，例如通过第3步），检查当前的img并适当地添加类。请注意，此

$（'ul img:nth child（3n+3）'）.height（）

将返回集合中第一个元素（由jQuery收集）的

height

。因此，您的代码只是意味着与许多其他

img

s的样式类似的东西，这些样式仅取决于第一个

img

，这可能不是您想要的。虽然重构可能是有益的，但它并不能回答实际问题。我不确定我可以使用什么来代替确切的高度、一点背景。。。用户将上传一个完整的图像文件（500+），不知道这些图像是什么，除非它们总是800px。我可以用if比x好，比xJames少。虽然我在跨浏览器时遇到了一些问题，但你的想法似乎是可行的。Chrome-页面刷新的中断。狩猎-根本不工作。Firefox-始终工作-它与我的设置完美配合-除了刷新问题Just required$（window.load（））

var $threes = $('ul img:nth-child(3n+3)');  // get the collection of all 3n+3 elements
var $fours = $('ul img:nth-child(3n+4)');   // get the collection of all 3n+4 elements

for(var i = 0; i < $fours.length; i++){
    var $three = $threes.eq(i);  // get the individual element
    var $four = $fours.eq(i);    // get the individual element

    var result = $three.height() + $four.height();

    if (result == 109) {
        $three.addClass('style1a');
        $four.addClass('style1b');
    } else if (result == 246) {
        $three.addClass('style2a');
        $four.addClass('style2b');
    } else if (result == 177) {
        $three.addClass('style3a');
        $four.addClass('style3b');
    }
}