Question

我目前正在应用基于第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来计算每个ITERATION 3n + 3和3n + 4的高度，而不仅仅是第一次迭代，然后应用样式。

li（3）+ li（4）的SUM添加样式，li（6）+ li（7）的SUM添加样式。

提前致谢！

Answer 1

因为您需要单独处理每对元素，所以您需要遍历集合。像这样：

http://jsfiddle.net/b187z18q/

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

$(function() {
  var $threes = $('ul img:nth-child(3n+3)');
  var $fours = $('ul img:nth-child(3n+4)');

  for (var i = 0; i < $fours.length; i++) {
    var $three = $threes.eq(i);
    var $four = $fours.eq(i);

    var result = $three.height() + $four.height();
    console.log(result);
    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');
    }
  }




});

.style1a,
.style1b {
  border: 1px solid blue;
}
.style2a,
.style2b {
  border: 1px solid red;
}
.style3a,
.style3b {
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <img src="http://placehold.it/35x50" />
    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x59" />
    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x50" />
    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x100" />
    <img src="http://placehold.it/35x77" />

    <img src="http://placehold.it/35x50" />

    <img src="http://placehold.it/35x146" />
    <img src="http://placehold.it/35x100" />

    <img src="http://placehold.it/35x50" />
  </li>
</ul>

Answer 2

这似乎不是解决此问题的干净方法。首先，依赖于确切的高度可能真的很麻烦，因为如果一个像素发生变化，你的代码就会被抛弃。考虑使用小于/大于vs equals或在元素上设置类。此外，您应该声明一次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;
}

Answer 3

$返回元素集合（即使只有一个匹配元素，它仍然放入集合中）。因为$ always总是返回一个集合，所以如果它认为合适，jQuery会查找该集合的第一个成员的属性/方法; 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;
}

计算结果的方式，在同一行上使用=和+ =是奇怪的，尽管这段代码可以解决这个问题。

Javascript造型第n个孩子

3 个答案: