Question

I am using Jquery and html to create a grid with an ordered list in a GUI. The user can dynamically edit the html content in each of the grid cells. I have two questions:

1. If each of the li elements has a .html associated with it that the user can edit, how can I iterate through all of the li elements to get the current value of the .html? Preferably without having to name each element individually….

2. I want to make the grid customizable by the user. I.e. if the user enters in that they want 2 rows and 2 cols, the grid will appear 2×2. How can I dynamically edit how html appears on the GUI? If the user wants a 10×10 grid, do I really have to create 100 li elements, or what’s a better way?

Here is my code for the ordered list. Right now there are 12 cells. Thanks!

<ol id="selectable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
</ol>

Answer 1

1. you could use .map() to get all the innerHTML from a list of elements. The following code would give you a list of the innerHTML of each li and join them by a comma.

   $('#selectable li').map(function(v) { return $(this).html() }).get().join(', ');

2. I am pretty sure that jQuery’s manipulation methods will assist you in inserting/removing elements. How many cells in grid really is up to your program; you could even allow them to insert 1000 cells. Why not?