在使用某个类进行div悬停时,找到最后一个类并将类添加到具有相同最后一个类的link元素。怎么在jQuery?

时间:2011-09-30 12:32:19

标签: jquery

如何在使用最后一个类悬停div时将类添加到元素(链接)?这就是我的意思:

我有这段代码:

<a href="http://google.com" class="menu nice menu-2">Google</a>
<a href="http://yahoo.com" class="menu nice menu-10">Yahoo</a>
<a href="http://facebook.com" class="menu nice menu-20">Facebook</a>

。 。

<div class="pretty fixed menu-20">Some text here</div>

重要!我不知道div类的名字。我只知道它永远是最后一个!所以,当我有像漂亮,固定和菜单20这样的课程时,我需要菜单-20。

现在,我必须找到div的最后一个类,并以某种方式在link元素中找到相同的类,并将类添加到该链接元素,例如“太棒了”所以看起来像:

<a href="http://google.com" class="menu nice menu-2">Google</a>
<a href="http://yahoo.com" class="menu nice menu-10">Yahoo</a>
<a href="http://facebook.com" class="menu nice menu-20 awesome">Facebook</a>

怎么做?

提前致谢。

3 个答案:

答案 0 :(得分:1)

类只是另一个属性,这意味着您可以使用attr()提取它们并将它们作为字符串进行操作:

$('div').hover(function() { // mouseover
    var arrClasses = $(this).attr("class").split(" ");
    var strLastClass = arrClasses[arrClasses.length-1];
    $('a.'+strLastClass).addClass("awesome");
}, function() {  // mouseout
    $('a').removeClass("awesome"); // easier to just remove it everywhere
});

答案 1 :(得分:0)

试试这个

 $('div').hover(function(){
      var myClass =$(this).attr('class').split(' ')[$(this).attr('class').split(' ').length - 1];
       $('a.'+myClass ).addClass("awesome");
    })

答案 2 :(得分:0)

你可以做;

function getNameOfLastClass(el){

   var classNames=$(el).attr('class');
   var classes = classNames.split(' ');
   var lastClass = classes.pop();
    return lastClass;
}

$('div').hover(function(){
   var last = getNameOfLastClass(this);
   console.log(last);
    $('a').each(function(){
         var lastA = getNameOfLastClass(this);
        if (lastA === last){
            $(this).addClass('awesome');
        }
    });

}
 function(){
        $('a').removeClass('awesome');
 });

在这里摆弄http://jsfiddle.net/JqMfZ/1/