Javascript 未正确显示第 n 个孩子（奇数）模式

Question

Trying to create a continuous list using multiple languages: PHP , JavaScript , CSS .尝试使用多种语言创建连续列表： PHP 、 JavaScript 、 CSS 。 However, as seen in the image, once the JS script gets called, it doesn't follow the continuous striped design of the list.但是，如图所示，一旦调用了 JS 脚本，它就不会遵循列表的连续条纹设计。 I am using nth-child(odd) to create this design pattern, but no matter where I place the JS script it continues to behave incorrectly.我正在使用 nth-child(odd) 创建这种设计模式，但是无论我将 JS 脚本放在哪里，它都会继续表现不正确。 Why is the JS script not continuing the pattern, and how could I fix this issue?为什么 JS 脚本没有继续这种模式，我该如何解决这个问题？

Thanks in advance.提前致谢。

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

JS JS

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 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;
}

Answer 1

Here's a minimal reproduction (it has nothing to do with PHP):这是一个最小的复制（它与 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>

As I mentioned in a comment, it's unsafe to be inlining a JS script that manipulates an incomplete DOM element like this.正如我在评论中提到的，内联一个像这样操作不完整 DOM 元素的 JS 脚本是不安全的。 Usually, you wait until the DOM is completely loaded, then run JS that might interact with the DOM.通常，您等到 DOM 完全加载后，然后运行可能与 DOM 交互的 JS。

You can use insertBefore to inject these elements into the proper position in the list after the DOM has finished loading, which doesn't bork the CSS rendering engine:在 DOM 完成加载后，您可以使用insertBefore将这些元素注入到列表中正确的 position 中，这不会破坏 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>

Answer 2

You should not use script tag between list tags.您不应该在列表标签之间使用script标签。 And this should insert elements after all code executed.这应该在所有代码执行后插入元素。

 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>

Answer 3

This is because, you are using :nth-child , this always includes all children irrespective of element type.这是因为，您使用的是:nth-child ，这始终包括所有子元素，而与元素类型无关。 Either try using :nth-of-type or never include other elements in children like other suggeted.要么尝试使用:nth-of-type ，要么永远不要像其他建议的那样在孩子中包含其他元素。 for more details refer MDN有关更多详细信息，请参阅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>

Javascript 未正确显示第 n 个孩子（奇数）模式

问题描述

3 个解决方案

解决方案1
0 2021-04-05 00:59:04

解决方案2
0 2021-04-05 01:00:14

解决方案3
0 2021-04-05 01:56:40

Javascript 未正确显示第 n 个孩子（奇数）模式

问题描述

3 个解决方案

解决方案1 0 2021-04-05 00:59:04

解决方案2 0 2021-04-05 01:00:14

解决方案3 0 2021-04-05 01:56:40

解决方案1
0 2021-04-05 00:59:04

解决方案2
0 2021-04-05 01:00:14

解决方案3
0 2021-04-05 01:56:40