Question

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

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

脚本中的功能

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

html代码

Answer 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>

Answer 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>

Answer 3

尝试一下

在append text code外面写each

$("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>

Answer 4

尝试一下

<!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>

Answer 5

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

$('div').map( (a,b) => { $(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>

jQuery颜色甚至div

5 个答案: