Question

我有这个我无法修改的代码，我想添加一个选择器，选择（点击）其下的所有元素，直到主元素的下一个外观。问题是它们不是嵌套的，只是一个嵌套的。

<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_project并隐藏它们，但是我希望它能够创建一个按钮，点击隐藏/显示所有sidebar_projects从它的项目名称div到下一个项目名称div。

THx的

Answer 1

试试这个：

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

我没有对此进行测试，但我认为这对你来说没问题。

有关nextUntil()的详情，请参阅here

Answer 2

也许有点像这样：

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

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

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

显然这个问题是你可能在页面上有其他div，所以我希望你的问题中显示的div在一些包含对象中，这样你就可以这样做：

var $container = $("selector for container here");
$container.find('div:not(.sidebar_project)').click(function() {
    $(this).nextUntil(':not(.sidebar_project)').toggle();
});

Jquery帮助选择

2 个答案: