使用带有id的兄弟h3标签选择带标识的div中的p标签

如果上面的标题有些复杂，请以简单的英文写这些东西通常比内部的问题更困难！使用带有id的兄弟h3标签选择带标识的div中的p标签

我敢肯定这是一个相当基本的问题，但我有点与jQuery选择器和层次结合，现在看不到树木了......这是一个课堂练习，所以我是坚持使用HTML代码。

我试图通过双击H3标题来隐藏/显示H3标题下的段落。

<div class="chapter" id="chapter-preface"> 
    <h3 class="chapter-title">Preface</h3> 
    <p>Blah, blah, blah, blah, blah</p> 
    <p>Blah, blah, blah, blah</p> 
    <p>Blah, blah, blah</p> 
    <p>Blah</p> 
</div> 
<div class="chapter" id="chapter-1"> 
    <h3 class="chapter-title">Chapter 1</h3> 
    <p>Rhubarb, rhubarb, rhubarb, rhubarb, rhubarb, rhubarb</p> 
    <p>Rhubarb, rhubarb, rhubarb</p> 
</div>

我已经走了这么远是下面的jQuery代码最接近：

$('.chapter-title').dblclick(function() { 
    $('div p').toggleClass('hidden'); 
});

但可能是相当明显的这只藏有两下的div的所有p标签的作用。我希望它能隐藏在双击的相关H3标题下的p标签。我试过使用'this'，但显然不正确，因为它没有达到预期效果。

我想我需要以某种方式选择单击的H3标记的父母div和与它关联的唯一ID，然后将隐藏/显示事件应用于....任何建议？

干杯！

来源

2012-02-13 Dan Solo

嗯......大黄。 – BoltClock 2012-02-13 11:10:09

您可以简单地使用.nextAll()或.siblings()挑选所有p元以下，在父divh3，实际上并没有选择父div：

$('.chapter-title').dblclick(function() { 
    $(this).nextAll('p').toggleClass('hidden'); 
});

来源

2012-02-13 11:10:59 BoltClock

我*会*选择父'div'并将其赋予类，然后将隐藏的样式应用于'div.chapter.hidden p'，作为一种更干净的解决方案。 – BoltClock 2012-02-13 11:14:14

太好了，谢谢 - 我知道这会让人感到尴尬的简单。 – 2012-02-13 12:10:36

您可以使用.nextAll或.siblings：

$('.chapter-title').dblclick(function() { 
    $(this).nextAll("p").toggleClass('hidden'); 
});

或者：

$('.chapter-title').dblclick(function() { 
    $(this).siblings("p").toggleClass('hidden'); 
});

来源

2012-02-13 11:11:06 karim79

试试这个：

$('.chapter-title').dblclick(function() { 
    $(this).siblings('p').toggleClass('hidden'); 
});

来源

2012-02-13 11:11:13

使用nextAll('p')将得到所有在与匹配选择当前的元素。 toggle()将根据需要隐藏/显示它们，并保存班级的使用。

试试这个：

$('.chapter-title').dblclick(function() { 
    $(this).nextAll('p').toggle(); 
});

Example fiddle

来源

2012-02-13 11:12:09

+1：提供一个工作示例 – 2012-02-13 11:19:58

为什么不干脆用的toggle()代替toggleClass（ '隐藏'）和你的情况，你却只有你的DIV中para元素，所以你可以再次简单地写siblings()。但如果你有其他元素，然后兄弟姐妹（'p'）是一种方式去。

下面是代码

$('.chapter-title').dblclick(function() { 
$(this).siblings().toggle(); 
});

只是，如果你需要了解更多：

工作 ---当任何标题的点击该修改CSS属性display:inline到display:hidden当标题再次点击此CSS属性更改回display:inline。是啊！它恢复它。

来源

2012-02-14 12:49:07 kushalvm

使用带有id的兄弟h3标签选择带标识的div中的p标签

回答

相关问题