foreach item только для отображения одной строки

Question

У меня есть jquery accordion в mvc view. Он отлично работает для одной строки, но не отображает строку foreach в таблице. не может понять, почему, поскольку он содержится в инструкции foreach.

@Scripts.Render@if ("~/jquery") 
@StylesModel.Render("~/Content/css"Isproject) 
<link{ href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

<script> 
    $(function() { 
      $("#accordion").accordion({ 
      <div class="table"> 
       <div>collapsible: true </div> 
     });<div> 
    }); 
    </script> 


@if (Model.Isproject) 
{     
    <div class="table"> 
     <div> 
     </div> 
     <div> 
      <table class="name" style="border-spacing: 0 8px; border-collapse: separate;"> 
       @foreach (var item in Model.project) 
       { 
        @:<tr style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;">   
         <td class="position"> 
          @item["post"] 
         </td>      
         <td class="image"> 
          <img src="@item["image"]" style="height: 37px; width: 37px"/> 
         </td> 
         <td style="width: 50%;padding-left: 10px;text-align: left;"> 
          <div id="accordion"> 
           <a href="#">@item["name"]</a> 
           <p>Content in dropdown</p> 
          </div> 
         </td> 
         <td style="width: 10%; text-align: center"> 
          @item["rate"] 
         </td>        
        @:</tr>            
       } 
      </table> 
     </div> 
    </div> 
}​ 

Так вкратце мне нужно JQuery работает для каждого входа/строки, а не только первый вход/строку.

Answer 1

поэтому, когда вы сделаете это $("#accordion").accordion, он выберет первый элемент с помощью аккордеона id и добавит свойства аккордеона и разметку на него, остальное будет проигнорировано.

И, в цикле Еогеасп, вы назначаете тот же идентификатор для каждого из div внутри конкретного td т.е. <div id="accordion">, что неправильно.

пытаются назначить уникальный идентификатор или вместо идентификатора использования класса, т.е. <div class="myaccordion"> и в коде JQuery выше этого $(".myaccordion").accordion

, а также правильный синтаксис для инициализации аккордеона будет:

$(".accordion").accordion({ 
     collapsible: true 
    }); 

и не то, что у вас есть прямо сейчас (я буду считать это опечаткой). Кроме того, правильный способ сделать несколько разделов внутри аккордеона заключается в следующем:

<div id="accordion"> 
    <h3>Section 1</h3> 
    <div> 
    <p> this is section 1</p> 
    </div> 
    <h3>Section 2</h3> 
    <div> 
    <p>this is section 2</p> 
    </div> 
    <h3>Section 3</h3> 
    <div> 
    <p>this is section 3</p> 
    </div> 
</div> 

поэтому в основном, вам нужно восстановить свой цикл Еогеаспа, сохраняя главный аккордеон DIV снаружи и повторяя разделы только