Javascript foreach loop?

Question

I have a question about repeater objects in asp.net.

In html and script parts I have this code below.

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MyEdit);

function MyEdit() {
  jQuery(function($) {

    //editables on first profile page
    $.fn.editable.defaults.mode = 'inline';
    $.fn.editableform.loading = "<div class='editableform-loading'><i class='ace-icon fa fa-spinner fa-spin fa-2x light-blue'></i></div>";
    $.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="ace-icon fa fa-check"></i></button>' +
      '<button type="button" class="btn editable-cancel"><i class="ace-icon fa fa-times"></i></button>'
    //editables 
    //text editable
    $('#rptQuestionTitle')
      .editable({
        type: 'text',
        name: 'username'
      });
    $('#rptQuestionDescription')
      .editable({
        type: 'text',
        name: 'username'
      });

  });
}
MyEdit();

<asp:Repeater ID="rptQuestionRepeater" runat="server">
  <HeaderTemplate>
    <table class="table table-bordered">
      <tr>
        <th style="width: 50px">No</th>
        <th style="width: 200px; height: auto">Question</th>
        <th style="width: 400px; height: auto">Description</th>
      </tr>
  </HeaderTemplate>
  <ItemTemplate>
    <tr>
      <td>
        <%#Eval("Sort")%>
      </td>
      <td><span class="editable editable-click" runat="server" id="rptQuestionTitle"><%#Eval("Text") %></span></td>
      <td><span class="editable editable-click" runat="server" id="rptQuestionDescription"><%#Eval("Description") %></span></td>
    </tr>
  </ItemTemplate>
  <FooterTemplate>
    </table>
  </FooterTemplate>
</asp:Repeater>

I am trying to do an editable table. I have to be able to edit each row. But as you can see my script codes, I can only assign id's to be editable. I need to have class editable. In ASP.NET repeater each element has different Id's thanks to the repeater. My edit JS code works just for one row because I've assigned the id's by myself as in the JS and Repeater. But after second row the ID's are automatically changed into something like repeater's counter.

So my real question is, apart from editing with equal ID's in the script, how can I edit my rows in repeater which they will have different ID's. I think I need to use foreach() but not sure how to do it.

I want to have my all rows editable when I just type their class ".editable" or I can create another class, it doesn't really matter. All I want is an ID free solution.

Answer 1

I wasn't able to run your code at the snippet. Bu try using $('.editable') instead of the id $('#rptQuestionTitle'). If the plugins is ready to receive an array and work with it, it'll work.