需求：利用prevAll、nextAll、this实现星级评分。横向排列li存放空心星；给li绑定mouseover事件。鼠标悬浮时，当前元素及前面所有元素改为实心星，后面元素改为空心星。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="WebApplication1.WebForm10" %>
<!DOCTYPE html>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
<style>
ul li {
float:left;
list-style-type:none;
padding-left:10px;
}
</style>
<script type="text/javascript">
$(function () {
$('li').mouseover(function () {
$(this).prevAll().text('★').end().text('★').nextAll().text('☆');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</div>
</form>
</body>
</html>
Code language: HTML, XML (xml)说明： $(this).prevAll().text('★')：选中当前li前面所有同级元素，设为实心星； .end()：回到$(this)对象； .text('★')：当前li设置实心星； .nextAll().text('☆')：当前li后面所有同级元素，设置空心星。
Previous: 多个相同标记的时候进行遍历
Next: 练习一下-完成菜单选择功能