jQuery 隔行变色

143 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(function () {
      var jqLis = $('li');
      // jqLis默认就是数组 jqLis.length 获取到却是真实标签的长度,而不是它自身自带的长度,所以也就可以直接通过索引直接获取标签。
      for (var i = 0; i < jqLis.length; i++) {
        if (i % 2 === 0) {
          jqLis[i].style.backgroundColor = 'red';
        } else {
          jqLis.get(i).style.backgroundColor = 'yellow';
        }
      }
    })
  </script>
</head>
<body>
  <ul>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
  </ul>
</body>
</html>
  • demo 效果: