在页面效果中，有时候我们程序循环出来的列不能加上ID属性，因为可能有列表可能会循环出多个相同的ID，这样就不能使用Jquery的ID选择器，这时候 我们可以使用Class选择器,
同时我们也可能需求是对此节点元素的操作只局限于当前的div（或table中），我们看代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery效果</title>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//展开隐藏层
$(document).ready(function () {
$(".part").click(function () {
var hideP = $(this).next();
if (hideP.css('display') == 'none') {
hideP.show();
$(this).hide();
}
else {
hideP.hide();
$(this).show();
}
});
$(".all").click(function () {
var hideP = $(this).prev();
if (hideP.css('display') == 'none') {
hideP.show();
$(this).hide();
}
else {
hideP.hide();
$(this).show();
}
});
});
</script>
</head>
<body>
<!--循环出来的div-->
<div class='classA'>
<p class="part">内容1</p>
<p class="all" style="display:none">内容1，哈哈哈，我展开了，这里是更多内容哈</p>
</div>
<div class='classA'>
<p class="part">内容2</p>
<p class="all" style="display:none">内容2，哈哈哈，我展开了，这里是更多内容哈</p>
</div>
<div class='classA'>
<p class="part">内容3</p>
<p class="all" style="display:none">内容3，哈哈哈，我展开了，这里是更多内容哈</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery效果</title>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//展开隐藏层
$(document).ready(function () {
$(".part").click(function () {
var hideP = $(this).next();
if (hideP.css('display') == 'none') {
hideP.show();
$(this).hide();
}
else {
hideP.hide();
$(this).show();
}
});
$(".all").click(function () {
var hideP = $(this).prev();
if (hideP.css('display') == 'none') {
hideP.show();
$(this).hide();
}
else {
hideP.hide();
$(this).show();
}
});
});
</script>
</head>
<body>
<!--循环出来的div-->
<div class='classA'>
<p class="part">内容1</p>
<p class="all" style="display:none">内容1，哈哈哈，我展开了，这里是更多内容哈</p>
</div>
<div class='classA'>
<p class="part">内容2</p>
<p class="all" style="display:none">内容2，哈哈哈，我展开了，这里是更多内容哈</p>
</div>
<div class='classA'>
<p class="part">内容3</p>
<p class="all" style="display:none">内容3，哈哈哈，我展开了，这里是更多内容哈</p>
</div>
</body>
</html>
也就是说我想展开 classA处的隐藏内容，同时不影响到其他相同的classA处的内容。其实这里重点也就是jquery next、prev方法的使用，当然还可以用于其他场合。