Javascript 样式的第 n 个孩子

Javascript styling nth child

本文关键字：孩子 样式 Javascript      更新时间：2023-09-26

我目前正在根据第 2 个孩子的身高之和应用 css 类，例如，如果第二个孩子的身高 + 第三个孩子的身高等于 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） 的总和添加样式。

提前感谢！

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

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>

这似乎不是解决此问题的干净方法。首先，依靠确切的高度可能真的有问题，因为如果一个像素发生变化，你的代码就会被抛弃。考虑使用小于/大于与等于或在元素上设置一个类。另外，你应该声明一次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 会查找集合的第一个成员的属性/方法，如果它认为合适的话;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;
}

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

相关文章：