Cant найти следующий элемент с помощью JQuery

Question

Ok мой HTML разметка выглядит следующим образом:

<div class="refine_search_box"> 
    <div class="heading">Refine Search</div> 

    <div class="section_heading"><a href="#">By Size</a></div> 
    <div class="section"> 
      @Html.DropDownListFor(m => m.Size, new SelectList(Model.SizeList, "key", "value", Model.Size), "") 
    </div> 

    <div class="section_heading"><a href="#">By Sport</a></div> 
    <div class="section"> 
      @Html.DropDownListFor(m => m.Sport, new SelectList(Model.SportList, "key", "value", Model.Sport), "") 
    </div> 
</div> 

Мой Jquery выглядит следующим образом:

$(document).ready(function() { 
    $("div.section").toggle(); 

    $(".refine_search_box a").click(function (e) { 
     var $this = $(this); 
     var $div = $this.prev().nextAll(".section").first(); 
     $this.toggleClass("selected"); 
     $div.toggle(); 
     e.preventDefault(); 
    }); 
}); 

То, что я хочу, чтобы это произошло, когда связь в. section_heading нажата. Я хочу, чтобы div .section открывал это непосредственно после него. Но мой jQuery всегда ничего не возвращает для $ div, я думал, что это будет довольно просто, но я, очевидно, не вижу ничего очевидного. Я очень новичок в jQuery, так извиняюсь, если его глупо просто!

Cheers.

Answer 1

Я думаю, вам нужно использовать .parent() вместо .prev():

$(".refine_search_box a").click(function (e) { 
    var $this = $(this); 
    var $div = $this.parent().next(); 
    $this.toggleClass("selected"); 
    $div.toggle(); 
    e.preventDefault(); 
}); 

Это предполагает, что '.refine_search_box' окружает все ваши section_heading дивы.

Вы также можете использовать .parent().next(), пока ваш html останется таким же.

Answer 2

• использование next вместо nextAll
• prev возврата в предыдущий родственный, вы Нееф родителя:

---

$(".refine_search_box a").click(function (e) { 
    var $this = $(this); 
    var $div = $this.parent().next(".section").first(); //< ==== 
    $this.toggleClass("selected"); 
    $div.toggle(); 
    e.preventDefault(); 
}); 

Обратите внимание, что, как я заметил, я не могу видеть refine_search_box класс в разметке, возможно, это должно быть:

$(".section_heading a").click(function (e) { 
     ... 
    }