javascript - 将文本应用于所有 li 中具有特定类名的第一项

Question

我有一个包含多个项目的无序列表，为此我必须仅将文本应用于第一个带有 class 的项目status。

目前，我尝试这样做的方式是将文本替换为具有 class 的所有项目status。

我应该如何编写循环以仅将文本更改为具有类状态的第一个找到的项目（例如：名称 1 下的文本和下面代码段中名称 4 下的文本）。

var str = document.querySelectorAll(".second-level > .status");
    for(i = 0; i < str.length; i++) {
        str[i].textContent  = "TEST ME";
    }

.name {
  font-weight: bold;
  color: blue;
}
.status {
  color: red;
}
ul {
  display: flex;
  margin-left: 1rem;
}

<ul>
  <li>
    <div class="second-level" style="display: block;">
        <div class="name">Name 1</div>
        <div class="status">Some text</div>  
        <div class="country">+000 000 000 000</div>
        
        <div class="name">Name 2</div>
        <div class="status">Some text</div>  
        <div class="country"></div>  
        <div class="country">+000 000 000 000</div>



        <div class="name">Name 3</div>
        <div class="status">Some text</div>
        <div class="country"></div>
        <div class="country">+000 000 000 000</div>
      </div>
  </li>

  <li>
    <div class="second-level" style="display: block;">
        <div class="name">Name 4</div>
        <div class="status">Some text</div>  
        <div class="country">+000 000 000 000</div>
        
        <div class="name">Name 5</div>
        <div class="status">Some text</div>  
        <div class="country"></div>  
        <div class="country">+000 000 000 000</div>
      </div>
  </li>
</ul>

标签： javascript

Answer 1

只需使用querySelector. 它返回与指定选择器匹配的第一个元素。

for (let el of document.querySelectorAll(".second-level")) {
  el = el.querySelector(".status");
  if (el != null) el.textContent = "TEST ME";
}

.name {
  font-weight: bold;
  color: blue;
}
.status {
  color: red;
}
ul {
  display: flex;
  margin-left: 1rem;
}

<ul>
  <li>
    <div class="second-level" style="display: block;">
        <div class="name">Name 1</div>
        <div class="status">Some text</div>  
        <div class="country">+000 000 000 000</div>
        
        <div class="name">Name 2</div>
        <div class="status">Some text</div>  
        <div class="country"></div>  
        <div class="country">+000 000 000 000</div>



        <div class="name">Name 3</div>
        <div class="status">Some text</div>
        <div class="country"></div>
        <div class="country">+000 000 000 000</div>
      </div>
  </li>

  <li>
    <div class="second-level" style="display: block;">
        <div class="name">Name 4</div>
        <div class="status">Some text</div>  
        <div class="country">+000 000 000 000</div>
        
        <div class="name">Name 5</div>
        <div class="status">Some text</div>  
        <div class="country"></div>  
        <div class="country">+000 000 000 000</div>
      </div>
  </li>
</ul>