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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6973070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 21:38:23  来源:igfitidea点击:

How to add a class to the next element of current element array in jquery?

jqueryaddclass

提问by lorenc55

I would like to know how to do such thing.

我想知道如何做这样的事情。

e.g. I have something like this:

例如我有这样的事情:

<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>

I need to addClass to a hover a element, this is easy I do it like this:

我需要将 addClass 添加到悬停元素上,这很容易,我这样做:

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

However, I need to addClass to every next li element also.

但是,我还需要向每个下一个 li 元素添加类。

So, when e.g. first li aeleemnt is hovering the class show2 will be added to li aof the second li a element.

所以,当例如第一立一个eleemnt悬停类show2将被添加到立一个第二立一个元件的。

How to do this?

这该怎么做?

回答by ShankarSangoli

Try this

尝试这个

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


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

              }
            );

回答by Frédéric Hamidi

You can use parent()with next()and find()to match the next anchor element.

您可以将parent()next()find() 结合使用来匹配下一个锚元素。

From there, you can use add()to add the hovered element to the current set, and togglethe classes on both elements with a single call:

从那里,您可以使用add()将悬停的元素添加到当前集合,并通过一次调用切换两个元素上的类:

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

EDIT:The above does not take the alternate show2class name into account. To support it, you can do something like:

编辑:以上没有考虑备用show2类名。为了支持它,您可以执行以下操作:

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

回答by PeeHaa

$("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");
});

Although it can be written in one line.

虽然可以写成一行。

For readability I always like to use multiple lines.

为了可读性,我总是喜欢使用多行。

回答by Tadeck

You can achieve this by the following code (see this jsfiddleas a proof). It will process the list of items and assign different events for each of them, based on their number within the set of elements:

您可以通过以下代码实现此目的(请参阅此 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');
        });
    }
});

EDIT:I see now I misunderstood you - my solution will add showclass to every next element, not only the first of them.

编辑:我现在明白了,我误解了你 - 我的解决方案会show为每个下一个元素添加类,而不仅仅是第一个。

回答by Rajesh

You can use Jquery's nextfunction to get the next element.

您可以使用 Jquery 的next函数来获取下一个元素。

JsFiddle: jsfiddle.net/ra368sgj

JsFiddle:jsfiddle.net/ra368sgj

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