Question

我想知道如何做这件事。

e.g。我有这样的事情：

<ul>
   <li><a href="1.html">first item</a></li>
   <li><a href="2.html">second item</a></li>
   <li><a href="3.html">third item</a></li>
   <li><a href="4.html">fourth item</a></li>
</ul>

我需要将addClass添加到悬停元素中，这很容易我这样做：

$("li a").hover(
    function () {
        $(this).addClass("show");
    },
    function () {
        $(this).removeClass("show");
    }
);

但是，我还需要将addClass添加到每个下一个li元素。

所以，例如第一个 li a eleemnt正在徘徊，类show2将被添加到第二个元素的 li a 。

怎么做？

Answer 1

试试这个

$("li a").hover(
              function () {
                $(this).addClass("show").parent().next().addClass("show2");               


              },
              function () {
                $(this).removeClass("show").parent().next().removeClass("show2");

              }
            );

Answer 2

您可以将parent()与next()和find()一起使用，以匹配下一个锚元素。

从那里，你可以使用add()将hovered元素添加到当前集合中，并通过一次调用将toggle两个元素上的类添加到：{/ p>

$("li a").hover(function() {
    $(this).parent().next().find("a").add(this).toggleClass("show");
});

编辑：以上内容未考虑备用show2类名称。为了支持它，您可以执行以下操作：

$("li a").hover(function() {
    $(this).toggleClass("show").parent().next().find("a").toggleClass("show2");
});

Answer 3

$("li a").hover(function () {
  $(this).addClass("show");
  var next_li = $(this).parent().next();
  $('a', next_li).addClass("show2");
},
function () {
  $(this).removeClass("show");
  var next_li = $(this).parent().next();
  $('a', next_li).removeClass("show2");
});

虽然它可以写成一行。

为了便于阅读，我总是喜欢使用多行。

Answer 4

您可以通过以下代码实现此目的（请参阅this jsfiddle作为证明）。它将根据元素集中的数字处理项目列表并为每个项目分配不同的事件：

var my_list = jQuery('ul');
my_list.find('li').each(function(index, element){
    if (index == 0){
        jQuery(this).hover(function(){
            my_list.find('li a').addClass('show');
        }, function(){
            my_list.find('li a').removeClass('show');
        });
    } else {
        jQuery(this).hover(function(){
            my_list.find('li:gt('+(index-1)+') a').addClass('show');
        }, function(){
            my_list.find('li:gt('+(index-1)+') a').removeClass('show');
        });
    }
});

编辑：我现在看到我误解了你 - 我的解决方案会将show类添加到每个下一个元素，而不仅仅是第一个元素。

Answer 5

您可以使用Jquery的def LayersValueChange(self, index): …函数来获取下一个元素。

JsFiddle：jsfiddle.net/ra368sgj

next

如何在jquery中将类添加到当前元素数组的下一个元素？

5 个答案: