Question

我正在为新的足球赛季列出一份清单，我想在其中插入每轮比赛的结果并将其显示在清单中。我想更改少于3个字符的所有“ li”的值，而是显示

“待播放”

我尝试编写一个循环，循环查看带有tagName“ li”的所有元素，如果该元素少于三个字符，则将其innerHTML替换为“ To play”。

<div>
  <ul id="allResults">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
<script>
var parentGame = document.getElementById("allResults");
var listGames = parentGame.getElementsByTagName("li");
var listGamesLength = listGames.length;
for (var i = 0; i < listGamesLength; i++) {
  if (listGamesLength[i] < 3) {
    listGames[i].innerHTML = "To be played";
  }
}
</script>

我非常确定我的代码有很多问题，但是我想知道如何解决它-或者在完全错误的情况下重写它。

感谢您的帮助！：）

Answer 1

您的行：

 if (listGamesLength[i] < 3) {
   howManyNodes[i].innerHTML = "To be played";
 }

可能应该是：

 if (listGames[i].innerHTML.length < 3) {
     listGames[i].innerHTML = "To be played";
 }

Answer 2

你很近。您错过了"属性的结尾id。您还可以使用querySelectorAll来获取每个li元素并减少对DOM的查询量。最大的遗漏是您正在检查listGames.length，这将为您提供li元素的数量，而不是每个元素的字符数量。正确的方法是检查innerHTML.length中的所说元素。

也许是这样？我将最后一个更改为100，以更好地说明结果。

var listGames = document.querySelectorAll("#allResults li");
listGames.forEach(game => {
  if (game.innerHTML.length < 3) {
    game.innerHTML = "To be played";
  }
});

<div>
  <ul id="allResults">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>100</li>
  </ul>
</div>

Answer 3

if (listGamesLength[i] < 3) {对照数字3检查列表的长度，而不是列表中任何条目内容的长度。为此，您想要：

if (listGames[i].textContent.length < 3) {

除此之外，除了使用howManyNodes而不是listGames之外，您的代码还可以。但是，您可以使其更简单：

document.querySelectorAll("#allResults li").forEach(li => {
    if (li.textContent.length < 3) {
        li.textContent = "To be played";
    }
});

由NodeList返回的querySelectorAll被指定为具有forEach方法（现在不是以前）。如果您需要支持可能还没有的较旧环境，则可以使用my answer here来解决。在这些环境中，您可能还需要传统功能而不是箭头功能，所以：

// (After applying the polyfill to `NodeList.prototype`)
document.querySelectorAll("#allResults li").forEach(function(li) {
    if (li.textContent.length < 3) {
        li.textContent = "To be played";
    }
});

Answer 4

首先，您没有关闭报价：

<ul id="allResults">

您需要获取innerText才能获取li元素的值和编号，而不是确切的元素。因此您的代码将如下所示：

listGames[i].innerText < 3

您可以将其转换为int以进行正确比较。结果是：

parseInt(listGames[i].innerText) < 3

通过您设置未定义元素的方式。所以我将其更改为：

listGames[i].innerHTML = "To be played";

最终代码如下所示：

var parentGame = document.getElementById("allResults");
var listGames = parentGame.getElementsByTagName("li");
var listGamesLength = listGames.length;
for (var i = 0; i < listGamesLength; i++) {
  if (parseInt(listGames[i].innerText) < 3) {
    listGames[i].innerHTML = "To be played";
  }
}

<div>
  <ul id="allResults">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

用少于3个字符更改<li>的文本值

4 个答案: