如何点击按钮改变所有<li>列表首项颜色？附现有代码

实现步骤 #

• 新增专属按钮触发列表首项颜色修改
• 用jQuery的:first-child伪类选择器批量选中所有<ul>下的第一个<li>，无需给每个首项单独加ID
• 完善“Clique aqui”按钮的文本切换逻辑
• 保留原有按钮的功能

完整代码 #

HTML + 整合JS版本

<!--- Adicione ao exemplo um segundo botão com o texto “Clique aqui” e faça com
que ele, ao ser clicado, troque o seu próprio texto para “Já clicou”. --->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jQuery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Criando páginas com jQuery</h1> 
</div>
  
<div class="container mt-5">
  <div class="row div1">
    <div class="col-sm-4 coluna1">
      
      <div id="texto">
        <!-- 新增修改列表首项颜色的按钮 -->
        <button id="changeFirstLiColor" class="btn btn-info btn-xs">改变列表首项颜色</button>
      </div>
    <div class="col-sm-4 coluna2">
      <p class="classC">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p class="classD">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4 coluna3">      
      <p class="classE">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p class="classF">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      <!-- Muda a cor dos parágrafos-->
      <p class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p><input id="botao" type="button" class="btn btn-warning btn-xs 189738" value="Mudar de cor"/>
      <!-- Altera o texto do botão-->
      
      <div> <td class="btnDoc"><br>
           <button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Clique aqui</button>
           </td>
       </div>
    </div>
      <ul>
        <!--Crie um seletor que altere a cor do texto do primeiro item de todas as listas. -->
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>

    </div>
<div>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</div>
<div class="row div3">
  <div>
    <ul>
      <li>C++</li>
      <li>JAVA</li>
      <li>Python</li>
      <li>HTML/CSS</li>
    </ul>
  </div>

</div>
    
  </div>
  <div class="row div2">
    <h1>x caracteres</h1>
    <div class="col-12">
    <input class="contar" type="text" value="Vamos contar os caractesres?"/>
    </div>
  </div>
</div>
<div class="container-fluid rodape">

</div>

<script>
$(document).ready(function(){
    // 原有按钮功能：改变所有p标签颜色为红色
    $("#botao").click(function(){
      $("p").css("color", "red");
    });

    // 新增功能：点击按钮改变所有ul下第一个li的文字颜色
    $("#changeFirstLiColor").click(function(){
      // 这里设置为蓝色，可自行修改成需要的颜色
      $("ul li:first-child").css("color", "blue");
    });

    // 处理“Clique aqui”按钮：点击后切换文本为“Já clicou”
    $("#dados").click(function(){
      $(this).text("Já clicou");
    });
  });
</script>

</body>
</html>

关键说明 #

• 不用给每个列表首项加ID，$("ul li:first-child")会自动匹配每个<ul>下的第一个<li>，比逐个加ID高效得多
• 三个按钮的逻辑相互独立，不会影响彼此的功能
• 如果需要切换颜色（比如点击一次变蓝，再点击变绿），可以在新增按钮的事件里加判断逻辑，比如检查当前颜色后切换

内容的提问来源于stack exchange，提问作者MetricalJa