不同div中的jquery兄弟选择器答案

【问题标题】：jquery sibling selector in a different div不同div中的jquery兄弟选择器
【发布时间】：2012-08-05 22:39:02
【问题描述】：

我是 jquery 的新手，并试图使用户帮助我的代码工作，但我现在遇到了麻烦。

我想让我的摄影网站在顶部有按钮，当您单击按钮时，您单击的类别（即“风景”“肖像”“婚礼”）会显示所有带有这些“标签”的帖子（div类）。我让它在小提琴中工作，但是当我尝试将 div 包裹在帖子和按钮周围以将它们定位在页面上时，兄弟选择器会中断。

年长的工作在这里摆弄（没有 div 包装器）：http://jsfiddle.net/PxpXy/

这里的小提琴坏了（带有 div 包装器）：http://jsfiddle.net/JUsZK/10/

我已经为顶部的按钮和上下文 (#test & #test2) 添加了包装器，但现在（显然）兄弟选择器不起作用。

我怎样才能仍然拥有我的网站功能并使用 div 包装器在页面上重新定位它们？我是否不再需要兄弟选择器？

谢谢！

【问题讨论】：

请考虑在您的问题中发布这两个代码片段的相关部分（或带有用 cmets 标记的修订的单个版本的代码）。 Fiddles 是个好主意，但 Stack Overflow 的目标是自包含，如果 ($DEITY 禁止) jsfiddle 在某个地方下线，您的问题将被孤立，对未来的访问者没有多大用处。

【解决方案1】：

假设您已将图片包装在 id 为“test”的 div 中，您可以这样做：

$('#test .post').hide();

也就是说，隐藏 '#test' div 中的类 '.post' 的元素。

【讨论】：

【解决方案2】：

您的 div 不再是兄弟姐妹，固定版本可能是 http://jsfiddle.net/JUsZK/11/

【讨论】：

【解决方案3】：

您只需将选择器修改为：

$('button').click(function() {
    $('div.post').hide()
    $('.' + this.id).show(500);
});

当然，使用$('div.post') 可以处理所有 div 元素以及class 和post。要将响应限制在某些 divs，您可以指定一个父容器元素，然后使用find() 仅处理您特别感兴趣的那些元素，例如：

$('button').click(function() {
    $(parentElementSelector).find('.post').hide()
    $('.' + this.id).show(500);
});

请注意，我没有更正多个id 问题，但我建议使用class（或者，由于您没有在 jQuery 中使用它，我可以看到在您的问题中，只需删除 id)。

【讨论】：

【解决方案4】：

在 HTML 中，ids 应该是唯一的。在您的第二个（非工作）小提琴中，您有三个 id 为 test 的 div。

【讨论】：