<button id="eq2">eq(2)</button>
<button id="eq-3">eq(-3)</button>
<p>Lorem ipsum dolor. (index 0, index -4)</p>
<p>Lorem ipsum dolor. (index 1, index -3)</p>
<p>Lorem ipsum dolor. (index 2, index -2)</p>
<p>Lorem ipsum dolor. (index 3, index -1)</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
body {
margin: 20px;
font-size: 18px;
}
button {
padding: 10px;
margin-right: 8px;
margin-bottom: 18px;
background-color: tomato;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
}
$(document).ready(function() {
$("#eq2").click(function() {
$("p").eq(2).css("background-color", "yellow");
});
$("#eq-3").click(function() {
$("p").eq(-3).css("background-color", "red");
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.