Question

这适用于jQuery。

我想用Javascript实现的同一个例子。请帮我说明如何继续。

工作演示将对我有所帮助。

感谢。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
  }
  .blue {
    color: blue;
  }
  .under {
    text-decoration: underline;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>

<script>
$( "p:even" ).removeClass( "blue" );
</script>

</body>
</html>

Answer 1

使用nth-child

[].forEach.call(document.querySelectorAll("p:nth-child(even)"), function(elem, index) {
  elem.classList.remove("blue");
});

p {
  margin: 4px;
  font-size: 16px;
  font-weight: bolder;
}
.blue {
  color: blue;
}
.under {
  text-decoration: underline;
}
.highlight {
  background: yellow;
}

<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>

Answer 2

有很多方法，这里有一个......

var paras = document.getElementsByTagName('p');
for(var i=0; i < paras.length; i += 2){
    paras[i].className = paras[i].className.replace(/\b\s*blue\s*\b/, ' ');
}

Answer 3

使用javascript从HTML DOM中选择偶数元素

example

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytab1" 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>

＆＃13;

var datas = [{"id":28,"Title":"Sweden"}, {"id":56,"Title":"USA"}, {"id":89,"Title":"England"}];
document.writeln("<table border = '1' width = 100 >");
document.writeln("<tr><td>No Id</td><td>Title</td></tr>"); 
for(var i=0;i<datas.length;i++){
document.writeln("<tr><td>"+datas[i].id+"</td><td>"+datas[i].Title+"</td></tr>");
}
document.writeln("</table>");

＆＃13;

这个例子的Javascript方式

3 个答案: