Question

我试图在鼠标悬停时看到一些div，但我期望的代码应该起作用。也许我不正确地使用next（）？我在其他地方成功地使用了相同类型的东西，所以我有点不确定问题是什么。

代码：

$(".clause").mouseenter(function() {

    /* NOT WORKING */
    $(this).next("div.drawer-arrow").css("display","block");
    $(this).next("div.drawerBottom").css("display","block");

    $(".clause").css("border-bottom-right-radius", "0px");
    $(".clause").css("border-bottom-left-radius", "0px");

}).mouseleave(function(){

    /* NOT WORKING */
    $(this).next("div.drawer-arrow").css("display","none");
    $(this).next("div.drawerBottom").css("display","none");

    $(".clause").css("border-bottom-right-radius", "3px");
    $(".clause").css("border-bottom-left-radius", "3px"); 

});

$(".clause").click(function() {
    $(".clause").css("box-shadow", "none");

    /* WORKING */
    var tmp = $(this).next("div.drawer");
    if(tmp.is(":hidden")) {
        tmp.slideDown('2s');
        $(this).css("box-shadow", "0px 3px 5px #AAA");
    }
    else {
        tmp.slideUp('2s');
    }
});

Answer 1

使用nextAll（）代替next（）。下一步（）只需检查下一个元素，在您的情况下，该元素不是您要定位的类。

Answer 2

使用以下内容：

$(this).next().next('.drawer-arrow').css("display","block");
$(this).next().next().next('.drawerBottom').css("display","block");

额外的.next()会选择<div class="drawer">元素，接下来会再次drawer-arrow，然后再次获取drawerBottom

修改

多次使用.next()删除元素可能不如更改标记以对查询部分进行分组。您可以考虑重新构造标记，以便可以使用更简单的选择器：

<div class="queryGroup"> <div class="clause">...</div> <div class="drawer">...</div> <div class="drawer-arrow"></div> <div class="drawerBottom"></div> </div>

.clause mouseenter事件可能类似于：

var $this = $(this); // cache this as a jQuery object $this.nextAll('.drawer-arrow').show(); $this.nextAll('.drawerBottom').show(); ...

Answer 3

你可以使用next all并组合两个选择器 - .next（）只查看当前元素之后的元素。 .nextAll将在与选择器匹配的当前元素之后找到所有兄弟节点。

$(".clause").mouseenter(function() {    
    $(this).nextAll("div.drawer-arrow:first,div.drawerBottom:first").show();    
    $(".clause").css("border-bottom-right-radius", "0px")
                .css("border-bottom-left-radius", "0px");

}).mouseleave(function(){
    $(this).nextAll("div.drawer-arrow:first,div.drawerBottom:first").hide();    
    $(".clause").css("border-bottom-right-radius", "3px")
                .css("border-bottom-left-radius", "3px");     
});

http://jsfiddle.net/wirey00/5dBsq/

Answer 4

尝试使用.nextAll()

$(this).nextAll('.drawer-arrow').first().css("display","block");

.next()只会选择与选择器匹配的元素。（否则它会返回一个空的选择器）..

你可以将它与.first()结合起来，这将获得第一个元素而不是该类的所有元素

在这种情况下，当你不知道当前和下一个元素之间的兄弟数时，最好使用.nextAll()。

使用.next（）选择具有特定类的div

4 个答案: