jQuery: append() for each element

Question

I have a table and a list:

<table>
  <tr>
       <td>Jack</td>
       <td class="date"></td>
  </tr>

  <tr>
       <td>David</td>
       <td class="date"></td>
  </tr>

  ...
</table>

<hr />

<span class="inline-date">2012</span>
<span class="inline-date">2013</span>

I want to append each span.inline-date to each td.date like this:

<table>
  <tr>
       <td>Jack</td>
       <td class="date"><span class="inline-date">2012</span></td>
  </tr>

  <tr>
       <td>David</td>
       <td class="date"><span class="inline-date">2013</span></td>
  </tr>

  ...
</table>

I tired:

  
  $("span.inline-date").appendTo('table td.date');

But I get double span in each td.

I miss something?

Matt · Accepted Answer · 2013-02-17 14:00:10Z

7

You can use each() like this;

var cells = $('table td.date');

$('span.inline-date').each(function (i) {
    cells.eq(i).append($(this));
});

answered Feb 17, 2013 at 14:00

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

izogfif Over a year ago

You might also want to use clone() to keep the original element in place. See this answer

Collectives™ on Stack Overflow

jQuery: append() for each element

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related