Javascript 未正確顯示第 n 個孩子（奇數）模式
[英]Javascript not correctly displaying nth-child(odd) pattern
問題描述
嘗試使用多種語言創建連續列表： 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>
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
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;
}
3 個解決方案
解決方案1
0 2021-04-05 00:59:04
這是一個最小的復制（它與 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將這些元素注入到列表中正確的 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>
解決方案2
0 2021-04-05 01:00:14
您不應該在列表標簽之間使用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>
解決方案3
0 2021-04-05 01:56:40
這是因為，您使用的是: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>
CSS nth-child（odd）與Javascript性能
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.