<ul>
<li>日本
<ul>
<li>東京</li>
<li>大阪</li>
<li>愛知</li>
</ul>
</li>
<li>アメリカ</li>
<li>イギリス</li>
</ul>
<input type="button" value="eq取得表示" onClick="view()" >
.bgcolor {
background: blue;
}
.textcolor {
color : #f00;
}
.textfont {
font-weight: 900;
}
$("li:eq(1)").addClass("bgcolor");
$("li").eq(1).addClass("textcolor");
//$("li:nth-child(2)").addClass("textfont");
function view() {
let viewIndex = "";
$("li").each(function(index) {
let getIndex = "<p>" + index + "番目の要素は" + $("li").eq(index).text() + "</p>";
viewIndex = viewIndex + getIndex ;
});
$("input").after(viewIndex);
}
This Pen doesn't use any external CSS resources.