jquery - jquery兄弟选择器在不同的div

Question

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

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

这里的老工作小提琴（没有 div 包装器）：http: //jsfiddle.net/PxpXy/

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

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

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

谢谢！

score 3 · Accepted Answer

鉴于您已将图片包装在 id 为“test”的 div 中，您可以执行以下操作：

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

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

score 2 · Accepted Answer

2

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

于 2012-08-05T14:34:54.300 回答

score 2 · Accepted Answer

您只需将选择器修改为：

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

$('div.post')当然，使用will 可以处理带有of 的所有 div元素。要将响应限制为仅某些s，您可以指定一个父容器元素，然后用于仅处理您特别感兴趣的那些元素，例如：classpost divfind()

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

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

score 1 · Accepted Answer

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

4 回答 4