使用.next（）選擇具有特定類的div

我試圖讓一些div在mouseover上可見，但是我期望的代碼應該可以正常工作。也許我正在使用next（）不正確？我在其他地方成功地使用了相同類型的東西，所以我有點不確定問題是什麼。使用.next（）選擇具有特定類的div

代碼：

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

來源

2012-10-22 Jon

那麼，什麼不起作用之間使用.nextAll()當你不知道兄弟的數量？ js小提琴例子工作正常。 PS：如果你給一個jsfiddle的鏈接，不要再發布你的代碼.. – tobspr

我上次被一個mod告訴我應該總是發佈代碼，不管我是否有小提琴或不是：/ 基本上，它是當我將鼠標懸停在.clause div上時，不會顯示.drawerBottom和.drawer-arrow div。 – Jon

@TobiasSpringer - 只發佈一個小提琴的代碼通常是皺眉;他應該在問題中有一些代碼。但是，如果他鏈接到小提琴，他應該只發布少量的代碼。 –

使用以下命令：

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

額外.next()將選擇<div class="drawer">元素，下一個更多的時間將得到，然後再拿到drawerBottom

編輯：

滴通過元素.next()多次可能不太理想與改變標記組合曲線切片。你可能會考慮重新結構化的標記，以便可以使用一個簡單的選擇：

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

然後.clausemouseenter事件可能是這樣的：

var $this = $(this); // cache this as a jQuery object 

$this.nextAll('.drawer-arrow').show(); 
$this.nextAll('.drawerBottom').show(); 

...

來源

2012-10-22 15:14:33 MikeM

這樣做。感謝您的解釋！對它爲什麼起作用有意義。 – Jon

@Jon用標記建議更新了答案 – MikeM

我曾考慮過這樣做，並可能會與您的建議。稍後，我將分組查詢，所以最好有這樣的結構。謝謝，md。 – Jon

使用nextAll（）代替未來的（）。下一步（）只是檢查下一個元素，在你的情況是不是你的目標類。

來源

2012-10-22 15:09:27

關閉，但我只希望抽屜的底部顯示我懸停的子句。這將顯示所有抽屜底部。 – Jon

nextAll（'div.drawer-arrow：first'）應該訣竅 –

您可以在下一個全部使用，並結合了選擇 - .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/

來源

2012-10-22 15:19:18

嘗試使用.nextAll()

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

.next()如果選擇匹配，只有選擇元素。（否則會返回一個空的選擇）..

你可以結合.first()這將獲得第一個元素，而不是所有的元素類

在這種情況下，最好是當前和下一個元素..

來源

2012-10-22 15:19:48

使用.next（）選擇具有特定類的div

回答

相關問題