title: jQuery select multiple table columns by index
body: <p>I've seen certain questions knocking around which are similar, but not exactly the same and I'm stumped with this one.</p>
  
  <p>What I'm trying to do is create a widget that takes a table, then goes through the table's td elements and sets a cursor:pointer (for now) to them, but only the ones that I allow.</p>
  
  <p>This is how my code looks:</p>
  
  <pre><code>selectableGrid: function (options) {
              var indexes = options.columns // this is [1,2];
  
              return this.each(function () {
                  // Make the td's in the grid selectable
                  $(this).find("tbody td").attr("style", "cursor:pointer");
              });
          }
  </code></pre>
  
  <p>The end result I'm wanting to achieve?</p>
  
  <pre><code>&lt;tbody&gt;
     &lt;td&gt;hello&lt;/td&gt; // index 0
     &lt;td style="cursor:pointer"&gt;hello&lt;/td&gt; //index 1
     &lt;td style="cursor:pointer"&gt;hello&lt;/td&gt; // index 2
  &lt;/tbody&gt;
  </code></pre>
  
  <p>Bear in mind that I could be sending through 1,3 in my array list of columns, so lt and gt don't work for my scenario (as far as I've tried anyway).</p>
  
  <p>EDIT:
  In order to achieve this I went with the following code:</p>
  
  <pre><code>$(this).find("tr").each(function () {
           $(this).find("td").each(function (i, el) {
                  if (indexes.indexOf(i) &gt; -1) {
                      $(this).css("cursor", "pointer");
                  };
           });
  });
  </code></pre>
  
  <p>For some reason "tbody td" wouldn't work for a singular loop as it only referenced the first iteration of the  tag.</p>
  
  <p>Thank you once again Stack Overflow.</p>