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隐藏）

.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

'。最近（选择器）'上升到祖先链并找到与选择器匹配的第一个祖先。

.next(selector)查看下一个元素，并且仅当它与选择器匹配时才返回下一个元素。它不会寻找与选择器匹配的下一个元素，无论它有多远。如果下一个元素与选择器匹配，它只返回一些东西。

从问题中，要获得保存div中的下一个答案，您可以这样做：

.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＆amp; A对都被限制在它自己的div中，你也可以这样做：

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

Answer 2

你需要使用两个下一个调用，因为next将仅返回下一个兄弟，如果给定，则匹配选择器。这里，答案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); 
});

在jquery中使用.closest，parent，next函数的困难

3 个答案: