jquery - jqueryを使用して別のTDでテキストを取得する方法

Question

1 つの td に 2 つのテキストが含まれる HTML 構造があります。2 番目のテキストを別の td でラップし、最初の td の後に追加します。関数を作成しましたが、正確に機能していません。ここにコード例があります

//Current html
<tr>
<td>first <a>second</a></td>
</tr>

//expected result
<tr>
<td>first</td>
<td><a>second</a></td>
</tr>

<script type="text/javascript">
$(function(){
var ff= [];
$('a').click(function(){
$('td a').each(function(index){
ff.push($(this).prop('outerHTML'));
$(this).remove();
$('td').eq(index).after().append('<td>'+ff[index]+'</td>')
})})})
</script>

Answer 1

$('a').click(function(){
    $('td a').each(function(index){
        $(this).insertAfter($(this).parent()).wrap('<td />');
    });
});

jsフィドル

Answer 2

各 td を新しい td 内に追加し、元の td の後に追加するだけです。

$('a').click(function(){

        $('td a').each(function(){
            $(this).parent().after('<td></td>');

            $(this).appendTo( $(this).parent().next() );


            });
        });

ワーキングjsfiddle

または1行で（もっと紛らわしい、多分:)）：

$('td a').each(function(){
            $(this).appendTo( $(this).parent().after('<td></td>').next() );
});