Cannot remove selected class from UL LI list
Question
My jQuery code doesn't appear to be working. Perhaps a fresh set of eyes can take a look over for me. I am failing at attempting to remove the previous classname "selected" once a new LI item has been clicked on. However, in the pic below, it seems to not be working:
Here is the jQuery Code in question:
<script type="text/javascript">
$(document).ready(function() {
$(".field_arrow").click(function() {
$(".field_list").css("display", "block");
});
$(".field_list li").click(function(e) {
var select = $(this).closest('.field_list')
select.find("ul li").removeClass('selected');
$(this).addClass('selected');
});
});
</script>
Here is the HTML Markup:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
* {
font-size: 9pt;
font-family: Segoe UI;
}
.field_container {
border: 1px solid rgb(170,170,170);
width: 177px;
}
.field_wrapper {
float: left;
}
.field_arrow {
background:url(arrow.png) no-repeat scroll right center;
width:20px;
margin-top: 1px;
}
.field_arrow:hover {
cursor: pointer;
}
.field {
border: 0;
width: 150px;
padding: 2px;
}
.field_list {
list-style:none;
margin: 0;
display: none;
border-top: 1px solid rgb(170,170,170);
margin-top: 5px;
padding: 1px;
}
.field_list li {
cursor: pointer;
padding: 2px;
}
.field_list li:hover {
background: red;
}
.selected {
background: blue;
color: #FFF
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".field_arrow").click(function() {
$(".field_list").css("display", "block");
});
$(".field_list li").click(function(e) {
var select = $(this).closest('.field_list')
select.find("ul li").removeClass('selected');
$(this).addClass('selected');
});
});
</script>
<div class="field_container">
<div class="field_wrapper"><input type="text" class="field"></div>
<div class="field_arrow"></div>
<ul class="field_list">
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
<div>
</body>
</html>
2 answers
solution1
3 ACCPTED 2015-11-17 18:11:17
field_list is the ul so you don't need the ul selector when finding the li s inside it. Try this:
select.find("li").removeClass('selected');
And if you only have one li selected at once you can just find the single one that currently has the class like this instead of attempting to remove the class from every li when only one will have it at a time:
select.find(".selected").removeClass('selected');
solution2
1 2015-11-17 18:14:38
You can simply do this using siblings() since you are trying to remove class selected from rest of the li and apply it to the current one..
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
Here's an example : http://jsfiddle.net/mj1u0qa2/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.