Search jQuery

jQuery Forum

in Using jQuery • 10 years ago

Is this the best way to handle setting a selected state on a specific item in a list? Or is there a cleaner method I'm overlooking? Thanks!

<li class="childElement selected">Child1</li>

<li class="childElement">Child2</li>

<li class="childElement">Child3</li>

</ul>

$(".childElement").click(function () {

var itemNum = $(this).index();

$(".parentElement").children().removeClass("selected");

$(".childElement").eq(itemNum).addClass("selected");

});

Replies(1)

10 years ago

Shorter, and correct for multiple .parentElement .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
$(".parentElement li").click(function () {
$(this).addClass("selected").siblings().removeClass("selected");
});
})
</script>
<style type="text/css">
.selected{color:red}
</style>
<title> Children </title>
</head>
<body>
<ul class="parentElement">
<li class=" selected">Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
<ul class="parentElement">
<li class=" selected">Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</body>
</html>

JΛ̊KE