jquery - Jquery替换表

Question

我有这张桌子：

<table class="catsTable" width="100%" cellspacing="1" cellpadding="0" border="0">
  <tbody><tr>
    <td style="width:25%" class="catsTd" id="cid5" valign="top">
        <a href="/load/prison_break_online/sezonul_1/5" >Sezonul 1</a> <span class="catNumData" style="unicode-bidi:embed;">[6]</span>
    </td>
    <td style="width:25%" class="catsTd" id="cid6" valign="top"><a href="/prison_break_online/sezonul_2/6" class="catName">Sezonul 2</a> <span class="catNumData" style="unicode-bidi:embed;">[0]</span></td>
    <td style="width:25%" class="catsTd" id="cid7" valign="top"><a href="/prison_break_online/sezonul_3/7" class="catName">Sezonul 3</a> <span class="catNumData" style="unicode-bidi:embed;">[0]</span></td>
    <td style="width:25%" class="catsTd" id="cid8" valign="top"><a href="/prison_break_online/sezonul_4/8" class="catName">Sezonul 4</a> <span class="catNumData" style="unicode-bidi:embed;">[0]</span></td>
  </tr></tbody>
</table>

因此可以将其替换为：

<ul id="menu-css">
    <li><a href="/prison_break_online/sezonul_2/6">Sezonul 2</a></li>
    <li><a href="/prison_break_online/sezonul_3/7">Sezonul 3</a></li>
    <li><a href="/prison_break_online/sezonul_4/8">Sezonul 4</a></li>
    <li><a href="/prison_break_online/sezonul_5/9">Sezonul 4</a></li>
</ul>

我试过：

<script>
    $($('.catsTable').find('td').get().reverse()).each(function(){
         $(this).replaceWith($('<li>'+$(this).html()+'</li>'))
    })
    $('.catNumData').remove();
</script>

但是仍然存在<table><tbody><tr> 或什至不可能这样的事情？

Answer 1

为什么不简单：

var newUL = $('<ul />',{'id' : 'menu-css'}).insertBefore('table.catsTable');
$('table.catsTable').find('a').each(function(){
    $(this).wrap('<li></li>').parent().appendTo(newUL);
}).closest('ul').next('table').remove();

JS 小提琴演示。

参考：

• appendTo().
• closest().
• each().
• find().
• insertBefore().
• next().
• parent().
• remove().
• wrap().

Answer 2

如果您想用 替换所有表格<ul>，您可以执行以下操作：

$('.catsTable').after('<ul id="menu-css">' + 
    '<li><a href="/prison_break_online/sezonul_2/6">Sezonul 2</a></li>' +
    '<li><a href="/prison_break_online/sezonul_3/7">Sezonul 3</a></li>' +
    '<li><a href="/prison_break_online/sezonul_4/8">Sezonul 4</a></li>' +
    '<li><a href="/prison_break_online/sezonul_5/9">Sezonul 4</a></li>' +
'</ul>').first().remove();

我希望我没有误解你想要什么...

Answer 3

也许你应该试试这个修复：

<script>
    $('.catsTable').find('td').each(function(){
         $(this).replaceWith('<li>'+$(this).html()+'</li>);
    });
    $('.catNumData').remove();
</script>

我修正了你的一些语法。你有一些额外的 $() 我删除了。