難以與.closest，父母，在jquery中的下一個功能

Question

所以即時嘗試使用.closest函數，並遇到問題，所以我去了別的東西，但這讓我難住，所以試圖找出它。

這是HTML：

<div class="faqW"> 
     <div class="faqQues2"> the question goes here </div> 
     <br/> 
     <div class="faqAns2"> answere to faq question here.</div> 
    </div><!-- faq wrap ender --> 

這是CSS隱藏答案（將變更爲JS隱藏IM完成後）

.faqAns2{ 
    background-color:#CC6; 
    color:black; 
     display:none; 
} 

這是JQ IM 試圖到用途：

var question = $('.faqQues'); 
var answer = $('.faqAns'); 
var question2= $('.faqQues2'); 

（變化嘗試沒有結果）

嘗試1：

question2.click(function(){ 
    $(this).parent().next('.faqAns2').slideToggle(500); 
}); 

或

question2.click(function(){ 
    $(this).parent('.faqW').next('.faqAns2').slideToggle(500); 
}); 

嘗試2：

question2.click(function(){ 
    $('.faqW',$(this)).closest('.faqAns2').slideToggle(500);  
}); 

嘗試3：

question2.click(function(){ 
$(this).next('.faqAns2').slideToggle(500); 
}); 

伊夫嘗試了很多方法，包括重新安排.parent等的html，但無濟於事。

我想要的是，當單擊問題時，最接近的答案會切換顯示。

我不知道我做錯了什麼。

謝謝先進。

Answer 1

'.closest（selector）'沿祖先鏈向上並找到匹配選擇器的第一個祖先。

.next(selector)查看下一個元素，並僅在匹配選擇器時才返回下一個元素。它不會查找與選擇器匹配的下一個元素，無論它有多遠。如果下一個元素與選擇器匹配，它只會返回一些內容。

從一個問題，得到的保存格的下一個答案，你可以這樣做：

.nextAll('.faqAns2') 

nextAll將得到在jQuery對象的元素之後選擇匹配的所有兄弟姐妹。

爲了您的具體問題，我想這會工作：

question2.click(function(){ 
    $(this).nextAll('.faqAns2').slideToggle(500); 
}); 

或者，如果你讓你的HTML更通用的，你可以使用相同的jQuery的所有問題和答案：

<div class="faqW"> 
    <div class="faqQues"> the question goes here </div> 
    <br/> 
    <div class="faqAns"> answere to faq question here.</div> 
</div><!-- faq wrap ender --> 

和jQuery：

$('.faqQues').click(function() { 
    $(this).nextAll('.faqAns').slideToggle(500); 
}); 

由於每個Q &一對是在它自己的侷限DIV，你也可以這樣做：

$('.faqQues').click(function() { 
    $(this).closest('.faqW').find('.faqAns').slideToggle(500); 
}); 

Answer 2

您需要使用兩個下調用，因爲接下來將僅返回緊跟其後的兄弟姐妹，是選擇如果給予匹配。在這裏，答案div是問題後的一個DOM節點。

question2.click(function(){ 
    $(this).next().next('.faqAns2').slideToggle(500); 
});​ 

拿在DOM遍歷功能http://api.jquery.com/category/traversing/

Answer 3

如果你穿越到父更仔細一看，.next()元素的即時兄弟相匹配。

要搜索的.faqW的孩子，你可以使用.find()，或者搜索從.faqQues2下一個答案，你可以使用nextAll()不只是搜索直接兄弟姐妹，但得到所有匹配的兄弟姐妹。

$ .find（） - http://jsfiddle.net/urLqE/：

question2.click(function(){ 
    $(this).parent().find('.faqAns2').slideToggle(500); 
}); 

$ .nextAll（） - http://jsfiddle.net/urLqE/1/：

question2.click(function(){ 
    $(this).nextAll('.faqAns2').slideToggle(500); 
});