AJAX提交，jquery效果问题

Question

我在网上找了一个PHP的AJAX+JQEURY的评分系统，我想在AJAX提交后，增加一个提示效果，使用JQUERY fadein 和fadeout。
每一组 $row=mysql_fetch_array 里有一个“a .vote”和一个“div.message”，
如何在点击“a .vote”之后，文字显示在相对于的“div.message”里？JS部分，主要请教修改的地方
jQuery(function() {
$(".vote").click(function() 
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up'){
$(this).fadeIn(2).html(' ');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
success: function(html){
parent.html(html);
parent.children('div').each(function() {   
$('.message').fadeIn(1, function() {
$('.message').html("<h2>你已经投过票了</h2>");
})
$('.message').fadeOut(2000, function() {
$('.message').html('');
})
})
}
});
}
return false;
});
});PHP部分，仅供参考<?php
include('config.php');
$sql=mysql_query("SELECT * FROM messages LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg=$row['msg'];
$mes_id=$row['mes_id'];
$up=$row['up'];
?>
<div id="main">
<div class="box1">
<div class='up'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="up"><?php echo $up; ?></a><div class="message"></div></div>
</div>
<div class='box2' >
<?php echo $msg;  ?>
</div>
</div>
<?php
}
?>CSS部分，仅供参考
body{font-family:'Georgia', Times New Roman, Times, serif;}
#main{height:80px; border:1px dashed #29ABE2;margin-bottom:7px;width:500px;}
a{color:#DF3D82;text-decoration:none;}
a:hover{color:#DF3D82;text-decoration:underline;}
.up{height:40px; font-size:24px; text-align:center; background-color:#009900; margin-bottom:2px;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
.up a{color:#FFFFFF;text-decoration:none;}
.up a:hover{color:#FFFFFF;text-decoration:none;}
.box1{float:left; height:80px; width:50px;}
.box2{float:left; width:440px; text-align:left;margin-left:10px;height:60px;margin-top:10px;font-weight:bold;font-size:18px;}
img{border:none;padding-top:7px;}
.message{z-index:10;position:relative;margin-left:60px;padding:0;width:150px;height:40px;background-color:#000;filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;font-size:11px;color:#FFF;display:none;}

Answer 1

PHP MYSQL_QUERY 生成这样以下这种样式。我需要，点击“鲁迅”，“鲁迅”相对应的那个<div class="message"></div>里面显示文字‘你已经投过票了’；点击“巴金”，“巴金”相对应的那个<div class="message"></div>里面显示文字‘你已经投过票了’；点击“冰心”，“冰心”相对应的那个<div class="message"></div>里面显示文字‘你已经投过票了‘ 。
目前我的代码不生效，点击后没有显示文字。而去掉 parent.children('div').each(function() {}， 则点击任意一个投票键，所有的<div class="message"></div>里面同时显示文字‘你已经投过票了’。另外又遇见一个问题，该AJAX代码和其他JQUERY插件代码冲突。卸掉这个AJAX插件，其余JQUERY插件代码里所有$都改成jQuery，系统可以通过测试。但是加上这一段AJAX代码，AJAX无效，请教如何解决冲突问题？谢谢。<div class='up'>
  <a href="" class="vote" id="id1" name="up">鲁迅</a>
  <div class="message"></div>
</div>
<div class='up'>
  <a href="" class="vote" id="id2" name="up">巴金</a>
  <div class="message"></div>
</div>
<div class='up'>
  <a href="" class="vote" id="id3" name="up">冰心</a>
  <div class="message"></div>
</div>

Answer 2

$(this).next().html("<h2>你已经投过票了</h2>");

Answer 3

jQuery(function() {
$(".vote").click(function() 
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up'){
$(this).fadeIn(2).html(' ');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,
context: this,
success: function(html){
parent.html(html);
{                                                          
$('.message').fadeIn(1, function() {
$(this).next().html("<h2>你已经投过票了</h2>");
})
$('.message').fadeOut(2000, function() {
$(this).next().html('');
})
}
});
}
return false;
});
});
hch126163， 加了个context: this,不行啊，还是3个DIV一起显示，然后里面的文字没有了。

Answer 4

success: function(html) {
parent.html(html);
parent.next('div').fadeIn(1,
function() {
parent.next('div').html("<h2>你已经投过票了</h2>");
});
parent.next('div').fadeOut(2000,
function() {
parent.next('div').html('');
})
}

Answer 5

$('.message')这个范围取大了，把PHP循环产生的所有div.message都操作了。

Answer 6

冲突问题的话，因为你这里用的是$。
不知道你其它插件是怎样的，正常讲不应该冲突。
既然冲突，那就可以用
var jq=jQuery.noConflict();
来给JQ重起个名字，用它代替$使用AJAX就可以了。

Answer 7

非常感谢theforever，6楼的代码可以解决这个问题了。