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.