0

我有这段无法修改的代码，我想添加一个选择器来选择（单击时）它下面的所有元素，直到下一次出现主元素。问题是它们没有嵌套，只是一个在另一个之下。

<div class="project name">..</div>
<div data-project-id="1987" class="sidebar_project">...</div>
<div data-project-id="3087" class="sidebar_project">...</div>
<div data-project-id="8903" class="sidebar_project">...</div>
<div data-project-id="223570" class="sidebar_project">...</div> 
<div class="project name">..</div>
<div data-project-id="1846" class="sidebar_project">...</div>
<div data-project-id="0935" class="sidebar_project">...</div>
<div data-project-id="84735" class="sidebar_project">...</div> 
<div class="project name">..</div>
<div data-project-id="11135" class="sidebar_project">...</div>

我可以轻松选择所有 sidebar_projects 并隐藏它们，但我希望它能够制作一个按钮，单击时隐藏/显示从它的项目名称 div 到下一个项目名称 div 的所有 sidebar_projects。

谢谢

4

2 回答 2

4

试试这个：

$('.project.name').on('click', function(e){
    $(this).nextUntil('.project.name', '.sidebar_project').toggle();
});

我没有对此进行测试，但我认为这对您来说会很好。

更多关于nextUntil()看这里

于 2012-08-16T09:58:22.073 回答
0

也许有点像这样：

$('div:not(.sidebar_project)').click(function() {
    $(this).nextUntil(':not(.sidebar_project)').toggle();
});

演示：http: //jsfiddle.net/nnnnnn/6gMnr/2/

这假设我上面的评论是正确的，即标题元素没有“项目”和“名称”类，但实际上它们具有不同项目的名称的不同类，因此有必要在他们没有“sidebar_project”类的基础。

显然，这个问题是您可能在页面上有其他 div，所以我希望您的问题中显示的 div 位于某个包含对象中，以便您可以这样做：

var $container = $("selector for container here");
$container.find('div:not(.sidebar_project)').click(function() {
    $(this).nextUntil(':not(.sidebar_project)').toggle();
});
于 2012-08-16T10:00:39.410 回答