javascript - 別の div の下にネストされている div の選択

Question

これは簡単なことだとわかっていますが、自分が間違っていることを理解することはできません。クリックすると関数を実行する h2 タグがあります。これにより、「homeSlide」クラスの div が検索され、slideToggle メソッドが実行されます。ただし、同じクラス名の下の2つのdivもスライドさせないと、コンテンツをスライドさせることはできないようです。

ここに私のHTMLがあります:

<h2>Header</h2>

<div id="home_newproducts_list">
   <div class="category-products">
      <ul class="products-grid">
         <li>Hold fetured products so will be excluded from the slideToggle</li>
      </ul>
      <div class="homeSlide">
         <!-- Content that needs to be displayed on slide -->
      </div>
   </div>
</div>

Jクエリ:

 jQuery(document).ready(function(){
            jQuery("#home_newproducts_list ul.products-grid").not(":first").wrapAll('<div class="homeSlide">');         
            jQuery(".home-spot h2").click(function(){
               jQuery(this).next('.homeSlide').slideToggle(1000);

            });

          });

私はそれを十分に詳細に説明したことを願っています。

だから私ができるようにしたいのは、homeSlide divでslideToggleメソッドを実行することだけですが、h2の後の次のものでのみです。