if($(".no3").next().length != 0){
//如果no3后面有人,那么改变这个人的姓名为no4
$(".no3").next().attr("class","no4");
}else{
//no3前面没人,那么改变此时队列最开头的那个人的名字为no0
$(".tuul li:first").attr("class","no4");
} //发现写完上面的程序之后,no6的行内样式还是json0的位置,所以强制:
$(".no4").css(json4);
这里需要注意的是:虽然已经经历了很多步奏的位置信息的改变及牌号的改变,但是刚刚被拉入等待区域的那张图片在li中的与兄弟节点的位置关系并没有发生改变,只是class属性变成了 “waiting”. 即此时的tuul中li的代码结构如下:
<ul class="tuul">
<li class="waiting"><a href="#"><img src="images/0.jpg" /></a></li>
<li class="no0"><a href="#"><img src="images/1.jpg" /></a></li>
<li class="no1"><a href="#"><img src="images/2.jpg" /></a></li>
<li class="no2"><a href="#"><img src="images/3.jpg" /></a></li>
<li class="no3"><a href="#"><img src="images/4.jpg" /></a></li>
<li class="no4"><a href="#"><img src="images/5.jpg" /></a></li>
<li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li>
<li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li>
<li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li>
</ul> 执行完以上代码后,剖析图如下:











