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/

これは、上記の私のコメントが正しいことを前提としています。つまり、見出し要素には「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();
});
于 2012-08-16T10:00:39.410 に答える