Javascript 未正确显示 nth-child(odd) 模式答案

【问题标题】：Javascript not correctly displaying nth-child(odd) patternJavascript 未正确显示 nth-child(odd) 模式
【发布时间】：2021-06-30 23:09:42
【问题描述】：

尝试使用多种语言创建连续列表：PHP、JavaScript、CSS。但是，如图所示，一旦调用了 JS 脚本，它就不会遵循列表的连续条纹设计。我正在使用 nth-child(odd) 来创建这种设计模式，但是无论我将 JS 脚本放在哪里，它都会继续表现不正确。为什么 JS 脚本没有继续该模式，我该如何解决这个问题？

提前致谢。

PHP

<!DOCTYPE html>
<html>

<head>
<title>Assignment</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>

<div class="card">
    <ul id="item-list">
        <?php for ($i = 1; $i < 4; $i++) { ?>
            <li><?php echo "php " . $i; ?></li>
        <?php } ?>

        <script src="list_v2.js"></script>

        <li>CSS 1</li>
        <li>CSS 2</li>
        <li>CSS 3</li>
    </ul>
</div>

</body>
</html>

var ul = document.getElementById("item-list");
for(let i=1; i<4; i++){
    var li = document.createElement('li');
    li.innerHTML = "JavaScript " + i;
    ul.appendChild(li);
}

CSS

ul {
    list-style-type: none;
    background-color: #fff;
    color: #111;
}

li {
    padding: 1rem;
    text-align: center;
    color: #808080;
}

li:nth-child(odd) {
    background-color: #ece2e1;
}

【问题讨论】：

在整个文档加载完成之前像这样运行 JS 内联有点奇怪。我会等到整个 DOM 加载完毕，然后开始尝试注入这些元素。不确定这是否一定会解决问题，但我认为调试起来会更容易。其次，在PHP中注入一些内容和使用JS注入一些内容有点奇怪（你已经有了这个内容，它似乎是静态的，为什么不使用PHP服务器端？）。这让我想到了一些important context is missing。

标签： javascript html css css-selectors

【解决方案1】：

您不应该在列表标签之间使用script 标签。这应该在所有代码执行后插入元素。

var ul = document.getElementById("item-list");
for(let i=1; i<4; i++){
    var li = document.createElement('li');
    li.innerHTML = "JavaScript " + i;
    ul.insertBefore(li, ul.childNodes[ul.childNodes.length-3]);
}

ul {
  list-style-type: none;
  background-color: #fff;
  color: #111;
}

li {
  padding: 1rem;
  text-align: center;
  color: #808080;
}

li:nth-child(odd) {
  background-color: #ece2e1;
}

<!DOCTYPE html>
<html>

<head>
<title>Assignment</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>

<div class="card">
    <ul id="item-list">
        <?php for ($i = 1; $i < 4; $i++) { ?>
            <li><?php echo "php " . $i; ?></li>
        <?php } ?>
        <li>CSS 1</li>
        <li>CSS 2</li>
        <li>CSS 3</li>
    </ul>
</div>

<script src="list_v2.js"></script>
</body>
</html>

【讨论】：

【解决方案2】：

这是一个最小的复制（它与 PHP 无关）：

ul {
  list-style-type: none;
  background-color: #fff;
  color: #111;
}

li {
  padding: 1rem;
  text-align: center;
  color: #808080;
}

li:nth-child(odd) {
  background-color: #ece2e1;
}

<ul id="item-list">
  <li>PHP 1</li>
  <li>PHP 2</li>
  <li>PHP 3</li>
  <script>
  var ul = document.getElementById("item-list");
  for(let i=1; i<4; i++){
      var li = document.createElement('li');
      li.innerHTML = "JavaScript " + i;
      ul.appendChild(li);
  } 
  </script>
  <li>CSS 1</li>
  <li>CSS 2</li>
  <li>CSS 3</li>
</ul>

正如我在评论中提到的，内联一个像这样操作不完整 DOM 元素的 JS 脚本是不安全的。通常，您会等到 DOM 完全加载完毕，然后运行可能与 DOM 交互的 JS。

您可以在 DOM 完成加载后使用 insertBefore 将这些元素注入到列表中的适当位置，这不会破坏 CSS 渲染引擎：

const ul = document.getElementById("item-list");

for (let i = 1; i < 4; i++) {
  const li = document.createElement('li');
  li.innerText = "JavaScript " + i;
  ul.insertBefore(li, ul.children[ul.children.length-3]);
}

ul {
  list-style-type: none;
  background-color: #fff;
  color: #111;
}

li {
  padding: 1rem;
  text-align: center;
  color: #808080;
}

li:nth-child(odd) {
  background-color: #ece2e1;
}

<ul id="item-list">
  <li>PHP 1</li>
  <li>PHP 2</li>
  <li>PHP 3</li>
  <li>CSS 1</li>
  <li>CSS 2</li>
  <li>CSS 3</li>
</ul>

【讨论】：

奇怪的是，我的列表与你的不同。代码修复了js，但是现在js的最后一个元素和css列表的第一个元素颜色相同（都是白色）。
嗯！您是否将 JS 脚本一直移动到 HTML 页面的底部，而不是将其包含在列表中？你可以在 PHP 中做到这一点，但不能在 JS 中做到这一点。您可以编辑您的帖子以显示更新代码的minimal reproducible example 吗？如果 PHP 不是导致该错误的因素，请忽略它，以便您可以显示runnable snippet，以便轻松查看问题的实际情况。谢谢。

【解决方案3】：

这是因为，您使用的是 :nth-child，这始终包括所有子元素，而与元素类型无关。尝试使用 :nth-of-type 或永远不要像其他建议的那样在子项中包含其他元素。更多详情请参考MDN

.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <script></script>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br>

<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <script></script>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

【讨论】：