请问关于jquery关于UL获取LI的有关问题

2013-01-11

请教关于jquery关于UL获取LI的问题。HTML是这样的div iddiv1ul classslice-piecelia0 (-9)/li

请教关于jquery关于UL获取LI的问题。
HTML是这样的


<div id="div1">
<ul class="slice-piece">
    <li>a0 (-9)</li>
    <li>a1 (-8)</li>
    <li>a2 (-7)</li>
    <li>a3 (-6)</li>
    <li>a4 (-5)</li>
    <li>a5 (-4)</li>
    <li>a6 (-3)</li>
    <li>a7 (-2)</li>
    <li>a8 (-1)</li>
</ul>
<ul class="slice-piece">
    <li>b0 (-9)</li>
    <li>b1 (-8)</li>
    <li>b2 (-7)</li>
    <li>b3 (-6)</li>
    <li>b4 (-5)</li>
    <li>b5 (-4)</li>
    <li>b6 (-3)</li>
    <li>b7 (-2)</li>
    <li>b8 (-1)</li>
</ul>
</div>

我希望当鼠标移动到第二个UL中的第三个LI标签的时候，能够隐藏第二个UL其他所有LI标签，只显示鼠标所在的第三个LI标签。
不知道JQUERY应当用什么办法实现呢？麻烦各位大侠了！ jquery
[解决办法]


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
$(function(){
$(".slice-piece1 li:nth-child(3)").mouseover(function(){ $(".slice-piece1 li").not($(this)).hide();});
//$(".slice-piece1 li:nth-child(3)").mouseout(function(){ $(".slice-piece1 li").not($(this)).show();});//这句是鼠标移开元素恢复，要不要你自己看着办吧
})
</script>
<div id="div1">
<ul class="slice-piece">
    <li>a0 (-9)</li>
    <li>a1 (-8)</li>
    <li>a2 (-7)</li>
    <li>a3 (-6)</li>
    <li>a4 (-5)</li>
    <li>a5 (-4)</li>
    <li>a6 (-3)</li>
    <li>a7 (-2)</li>
    <li>a8 (-1)</li>
</ul>
<ul class="slice-piece1">
    <li>b0 (-9)</li>
    <li>b1 (-8)</li>
    <li>b2 (-7)</li>
    <li>b3 (-6)</li>
    <li>b4 (-5)</li>
    <li>b5 (-4)</li>
    <li>b6 (-3)</li>
    <li>b7 (-2)</li>
    <li>b8 (-1)</li>
</ul>
</div>

[解决办法]

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
    $(function(){
        $(".slice-piece1 li:eq(2)").hover(function(){
            $(".slice-piece1 li").not($(this)).animate({opacity:0},1000);
        },function(){ 
 
            $(".slice-piece1 li").animate({opacity:1},1000);
        });
    })
    //我想直接透明比较好，保持位置不变，如果隐藏就会抖动！
</script>
<div id="div1">
    <ul class="slice-piece">
        <li>a0 (-9)</li>
        <li>a1 (-8)</li>
        <li>a2 (-7)</li>
        <li>a3 (-6)</li>
        <li>a4 (-5)</li>
        <li>a5 (-4)</li>
        <li>a6 (-3)</li>
        <li>a7 (-2)</li>
        <li>a8 (-1)</li>
    </ul>
    <ul class="slice-piece1">
        <li>b0 (-9)</li>
        <li>b1 (-8)</li>
        <li>b2 (-7)</li>
        <li>b3 (-6)</li>
        <li>b4 (-5)</li>
        <li>b5 (-4)</li>
        <li>b6 (-3)</li>
        <li>b7 (-2)</li>
        <li>b8 (-1)</li>
    </ul>
</div>

[解决办法]


<script type="text/javascript">
            $(".slice-piece:last li").eq(2).mouseenter(function () {
                $(".slice-piece:last li").not($(this)).hide("slow");
            })
        </script>

[解决办法]
大哥，你这是害我们呀，明明上面你说是第二个ul!!!!!!!
<script type="text/JavaScript">
    $(function(){
        $("li").hover(function(){
            $(this).siblings().stop().animate({opacity:0},1000);
        },function(){
            $(this).siblings().stop().animate({opacity:1},1000);
        });
    })
</script>

热点排行