Question

For example,
I have this code:

<table>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
</table>

I want this to be set like this using javascript:

<table>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
</table>

Just what is needed is,
javascript should detect td with class “last” and take whole table row to bottom of the table.

Answer 1

var last = $( '.last' );
last.parent().parent().append( last.parent() );

JSFiddle Demo.

last.parent().parent() is the table element, and last.parent() is the tr element.

append moves the DOM elements, so they’re not “copied”, they’re moved to the end.