jQuery对UL内的LI元素进行计数并获取当前悬停的数量

Question

我有一个<ul>，如下所示;

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

接下来，我有一个DIV包含另一个列表与图像。如下;

<ul> 
    <li><img src="example1.png" alt="" /></li> 
    <li><img src="example2.png" alt="" /></li> 
    <li><img src="example3.png" alt="" /></li> 
    <li><img src="example4.png" alt="" /></li> 
</ul> 

从技术上讲什么，我试图做的是，当我将鼠标悬停在第一个列表的<li>，它显示从第二个列表中正确<li>。

我的猜测是计算<li>的数量并获取当前悬停的数量。然后对第二个<ul>执行相同的操作，并使用相同的编号显示<li>。

这可能吗？

Answer 1

拨弄：http://jsfiddle.net/GTM3X/1/

这是不花哨，但你想要做什么。 让我知道它是否有帮助。

编辑：在这里添加代码，以便于访问。

$('.one li').hover(function() { 
    var x = $(this).index(); 
    $('.two li').hide().each(function(i, v) { 
     if (i == x) { 
      $(this).show(); 
     } 
    }); 
});​ 

Answer 2

你好做了一个小的显示和隐藏演示给你演示http://jsfiddle.net/KAJsF/

请让我知道如果这有助于，有一个很好的一个，干杯！

jQuery代码http://jsfiddle.net/KAJsF/

$(document).ready(function(){ 
    $("ul li").hover(function(){ 
     var showcalss = $(this).attr("class"); 
     $("."+showcalss+"img").show(); 
    }); 
     $("ul li").mouseout(function(){ 
     var showcalss = $(this).attr("class"); 
     $("."+showcalss+"img").hide(); 
    }); 
});​ 

HTML

<ul> 
    <li class="1">Item 1</li> 
    <li class="2">Item 2</li> 
    <li class="3">Item 3</li> 
    <li class="4">Item 4</li> 
</ul> 

<ul> 
    <li style="display:none" class="1img"><img src="example1.png" alt="" />SHOW 1</li> 
    <li style="display:none" class="2img"><img src="example2.png" alt="" />SHOW 2</li> 
    <li style="display:none" class="3img"><img src="example3.png" alt="" />SHOW 3</li> 
    <li style="display:none" class="4img"><img src="example4.png" alt="" />SHOW 4</li> 
</ul>​ 

Answer 3

请参见本例如http://jsfiddle.net/vtENY/3/ 代码是自我解释:)

没有必要更改html标记... LI索引是足够的:)

我想你可能想要隐藏第二个列表的所有LI，如果鼠标不在第一个LI中的任何一个列表...这个代码使窍门。让我知道...

// hide all LI in the "two" UL 
$("ul#two li").hide(); 

// listen for hover/unhover event 
$("ul#one li").hover(function(){ 

    // find the index of the LI to be displayed 
    var index = $(this).index(); 

    // show new active element 
    $("ul#two li").eq(index).addClass("active").show(); 
},function(){ 
    // hide prev active element 
    $("ul#two li.active").removeClass("active").hide(); 
})