JQuery 颜色偶数 div答案

【问题标题】：JQuery color even divsJQuery 颜色偶数 div
【发布时间】：2018-06-25 07:49:43
【问题描述】：

我想将偶数 div 中的文本颜色更改为黄色，将奇数 div 中的文本颜色更改为绿色。毕竟将所有 div 中的所有文本 cpncatenate 成一个更大的文本。我为这个问题写了一个解决方案，但由于某种原因它不起作用。有人可以帮忙吗？

问题 2 变量计数 = 1; $('div').each(函数(){ 如果（计数 % 2 == 0）{ $(this).css("背景色", "黄色"); } 别的 { $(this).css("color", "green"); } 计数 = 计数 + 1； $("div").clone(true, true).contents().appendTo('div.B'); })

脚本中的函数

<div>
    Hey
</div>
<div>
    Holla
</div>
    <div>
    Buna
</div>
    <div>
    Si
</div>
    <div>
    No
</div>
<div class = "B">
</div>

html代码

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以使用:even 和:odd 选择器

var divs = $('div'); 
 divs.filter(':even').css("background-color", "yellow");
 divs.filter(':odd').css("color", "green");
 
divs.clone(true, true).contents().appendTo('div.B');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    Hey
</div>
<div>
    Holla
</div>
    <div>
    Buna
</div>
    <div>
    Si
</div>
    <div>
    No
</div>
<div class = "B">
</div>

【讨论】：

【解决方案2】：

您可以使用 CSS 的 nth-child 实现此目的：

div:nth-child(2n) {
  background-color: yellow;
}
div:nth-child(2n+1) {
  color: green;
}

<div>
    Hey
</div>
<div>
    Holla
</div>
<div>
    Buna
</div>
<div>
    Si
</div>
<div>
    No
</div>

【讨论】：

使用 :even :odd 选择器也不错，但这是我认为最优雅的答案。只是纯CSS。我喜欢它:)
@n3ko 确定你可以使用它并最小化额外的 jQuery 代码来实现这一点。

【解决方案3】：

试试这个

在each之外写append text code

$("div").clone(true, true).contents().appendTo('div.B');

var count = 1;
$('div').each(function() {
  if (count % 2 == 0) {
    $(this).css("background-color", "yellow");
  } else {
    $(this).css("color", "green");
  }
  count = count + 1;
})
$("div").clone(true, true).contents().appendTo('div.B');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Hey
</div>
<div>
  Holla
</div>
<div>
  Buna
</div>
<div>
  Si
</div>
<div>
  No
</div>
<div class="B">
</div>

【讨论】：

【解决方案4】：

我希望，你正在寻找这样的东西：

$('div').map( (a,b) =&gt; { $(b).addClass( a%2 ? "red": "green") })

.red { color: red; }
.green { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    Hey
</div>
<div>
    Holla
</div>
    <div>
    Buna
</div>
    <div>
    Si
</div>
    <div>
    No
</div>
<div class = "B">
</div>

【讨论】：

【解决方案5】：

试试这个，

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
      $("tr:even").css("background-color", "yellow");
       $("tr:odd").css("background-color", "green");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
  <tr>
    <th>Company</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
</table>

</body>
</html>

【讨论】：

那...并没有接近 OP 想要的。此外，简单的旧 CSS 会做得更好。