0

Oi, pessoal. Estou tentando resolver o seguinte exercício: Implemente um script em jQuery que cada vez que for chamado (pode ser chamado pelo clique de um botão), um novo item da lista (partindo do topo) tenha todo seu texto na cor vermelha. Por exemplo, a primeira vez que o botão é clicado, a cor do texto do item "Introdução" é alterada para vermelho; se esse botão for acionado novamente, a cor do texto do segundo item (Desenvolvimento) será alterado para vermelho e assim sucessivamente.

$(document).ready(function (){
        $('#clique').click(function () {
            let filhos_ol = $("ol").children().siblings(':first-child');
            filhos_ol.css({"color": "blue"});
            filhos_ol = filhos_ol.next(':nth-child(2)').css({"color": "blue"});

        });
    });
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.slim.js"
            integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY="
            crossorigin="anonymous"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ol>
    <li>Introdução</li>
    <li>Desenvolvimento</li>
    <li>Resultado</li>
    <li>Conclusão</li>
</ol><br>
<button id="clique">Clique Aqui</button>
</body>
</html>

O problema acontece porque eu não consigo selecionar uma linha de cada vez. Quando clique no botão , ou todos os elementos são selecionados e pintados de azul, ou somente um elemento é selecionado.

O objetivo é selecionar um tag (li) por vez quando o botão for acionado.

1 Resposta 1

0

Você pode utilizar o método .filter() do jquery para filtrar os elementos que tenham somente a cor desejada. Vale lembrar que o método .css() retornar o valor no formato rgb().

E depois é só alterar o primeiro elemento para a cor desejada.

$(document).ready(function() {
  $('#clique').click(function(index) {
    let filhos_ol = $("li").filter(function() {
      return $(this).css("color") !== "rgb(0, 0, 255)";
    });

    filhos_ol.first().css({
      "color": "blue"
    });
  });
});
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <ol>
    <li>Introdução</li>
    <li>Desenvolvimento</li>
    <li>Resultado</li>
    <li>Conclusão</li>
  </ol><br>
  <button id="clique">Clique Aqui</button>
</body>

</html>

jQuery filter() Method

jQuery css() Method

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .