通过后缀将多个TD插入表中间

Question

I have a table with 2-4 columns and several rows. Some of the very right columns have a text, some have an image, some have both and some may have neither of them.

I want to copy the contents of the 2nd column into 3 newly created columns, but insert them in the middle (before text and the image, if applicable). So that it looks like that:

It is important, to loop over the suffixes as not all elements need to be moved.

That approach:

$("table td:nth-child(2) [id$=2]").each(function(i) {
  var $newCell = $(this).wrap('<td></td>').parent();
  var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
  $(this).parents('tr').remove();
  if ($newRow.find("td:contains('text')").index() > -1) {
    $newRow.find("td:contains('text')").before($newCell);
  } else if ($newRow.find("td.img").index() > -1) {
    $newRow.find("td:contains('img')").before($newCell);
  } else {
    $newRow.find("td:contains('img')").before($newCell);
  }
});

$("table td:nth-child(2) [id$=3]").each(function(i) {
  var $newCell = $(this).wrap('<td></td>').parent();
  var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
  $(this).parents('tr').remove();
  if ($newRow.find("td:contains('text')").index() > -1) {
    $newRow.find("td:contains('text')").before($newCell);
  } else if ($newRow.find("td.img").index() > -1) {
    $newRow.find("td:contains('img')").before($newCell);
  } else {
    $newRow.find("td:contains('img')").before($newCell);
  }
});

produces that result:

FIDDLE .

Answer 1

I've tried to update your fiddle with a different approach: https://jsfiddle.net/ed964u0o/1/

I saved the element to insert after in the object positions .