Jquery:在另一个元素的鼠标上方更改特定类

好的，我有这段html，它在页面上出现过几次，它的结构总是一样的，但是每次链接和链接文本都会随着列表文本而不同

<ul>
<li class="n1">Understand key issues relating to creating animations for interactive media products</li>
<li class="n2">Understand key contextual information relating to creating 2D animations for interactive media products</li>
<li class="n3">Be able to create 2D animations for use as part of an interactive media product</li>
<li class="n4">Be able to liaise with relevant parties</li>
<li class="n5">Be able to store 2D animations for use as part of an interactive media product</li>
</ul>
<hr />
<a href="alcohol_calculator.php" class="swfselector">
&raquo; Alcohol unit calculator prototype <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /><img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="bouncing_ball.php" class="swfselector">
&raquo; Bouncing ball animation <img class="tab" src="/images/3.png" width="30" height="28" alt="3" />
</a>
<a href="FOCC_mnemonic.php" class="swfselector">
&raquo; FOCC mnemonic <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="information_literacy_quiz.php" class="swfselector">
&raquo; Information literacy quiz <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="traffic_lights.php" class="swfselector">
&raquo; Traffic lights <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>

到目前为止，这些都是有效的。。。但是现在我有了这段Jquery，它还试图更改上面相应的

元素的类。因此，如果有人将鼠标悬停在包含图像的swf选择器上：1.png、3.png和5.png。类为n1、n2和n3的列表元素将更改为：n1o n3o和n5o

$(document).ready(function() {
 $('.swfselector').find('.tab').each(function() {
                $(this).attr("src", 
                $(this).attr("src").replace(".png", "o.png"));  
             })  
});
$('.swfselector').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
            $(this).find('.tab').each(function() {
                $(this).attr("src", 
            $(this).attr("src").replace("o.png", ".png"));  
            var srcString =  $(this).attr("src").substr(0, $(this).attr("src").length - 4);
            nameString =  srcString.substr(8, srcString.length - 1);
            $(this).closest('ul').find('li').each(function() {
            var className = $(this).attr('class');
              if (nameString.indexOf(className)) {
                  $(this).removeClass(className).addClass(className + 'o');
                  }
                })
             })
   } else {
             $(this).find('.tab').each(function() {
                $(this).attr("src", 
                $(this).attr("src").replace(".png", "o.png"));  
             })
         }
    });

上面的代码不返回任何错误，但不执行我想要的操作

 $(this).closest('ul').find('li').each(function() {

$（这）似乎引用了“.swfselector”，通过使用“最近”，您正在搜索祖先。但UL不是“.swfselector”的祖先

编辑：

您可能应该执行以下操作，而不是$（this）.colest（'ul'）：

$('ul').find('li').each(function() {....

或者更好的是，给你的“ul”一个id

$('#myUL').find('li').each(function() {

---

哪里出了问题？只需提醒数据，直到它出错。

$（this）.最近（'ul'）.find（'li'）.each（function（）{

它不知道这里后面的“this”是什么。而且srcString不对，因为我忘了删除图像/路径，所以我创建了一个名为nameString的新子字符串。

$（this）.attr（“src”

引用img标记，因为它在函数中：

$（this）.find（'.tab'）。每个（function（）{

这不也引用标记吗？我还理解了一个祖先是在DOM中位于它前面的东西否？你是正确的$（this）引用img元素。但是父元素是'a'元素，最接近的元素会向上搜索。UL是父元素的同级，因此不会被搜索。下一个顺序是'a'的父元素，您的html没有显示。好吧，这有点道理，所以如果我将这些块中的每一个放在一个div中，然后搜索父元素。tab我应该找到李的？我想你只需要直接调用列表。我已经更新了我的答案。谢谢，问题是页面上有很多这样的块，每个块都必须是单独的，所以如果swf选择器悬停在其中一个，它只会影响它正上方的列表。

$('#myUL').find('li').each(function() {