javascript - jQuery 提取内容，在里面切换内容，用新标签包装

Question

我一整天都在尝试根据需要重新排序这个菜单，但我是 jquery 的新手..我想做的是:

• 在此菜单的最后一个 td.top 中有 3 个 ul.sub li，我希望从那里提取每个，并将其内容放入 td.top 中。

• 然后内容里面有一个div和一个链接，我需要调换位置，链接必须在div之前(就像另一个td.top里面一样)

• 基本上我尝试制作 3 个 ul.sub。 li 相同(添加相同的类，具有相同的结构等，就像 td.top 的其余部分一样)

我该怎么做？我很感激任何提示..

这是我目前使用的代码:

$("ul.sub a.more_top_element").removeClass('button more_top_element').addClass("top_link").removeAttr('style').removeAttr('value');
$("ul.sub div").removeClass('more_sub').addClass("sub");

.. 在这里我应该有代码来提取 3 ul.sub li 中的内容并切换与 div 的链接，然后将其包装在 td.top..

这是我需要用 jquery 修改的 html:

<table class="topMenu" cellpadding="0" cellspacing="0">
<tbody>
<tr>
    <td class="top">
        <a href="http://localhost/d7t/m/photos/home/" class="top_link"><span class="down bx-def-padding-sec-leftright">Photos</span>
        <!--[if gte IE 7]><!-->
        </a>
        <!--<![endif]-->
        <div class="sub">
            <!--[if lte IE 6]><table id="mmm"><tr><td><![endif]-->
            <ul class="sub main_elements">
                <li>
                <a href="http://localhost/d7t/m/photos/home/" target="_self" class="button more_ntop_element">Home</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/photos/albums/browse/all" target="_self" class="button more_ntop_element">Albums</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/photos/browse/all" target="_self" class="button more_ntop_element">Recent</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/photos/browse/top" target="_self" class="button more_ntop_element">Top</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/photos/browse/popular" target="_self" class="button more_ntop_element">Popular</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/photos/browse/featured" target="_self" class="button more_ntop_element">Featured</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/photos/tags" target="_self" class="button more_ntop_element">Tags</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/photos/categories" target="_self" class="button more_ntop_element">Categories</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/photos/rate" target="_self" class="button more_ntop_element">Rater</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/photos/calendar" target="_self" class="button more_ntop_element">Calendar</a>
                </li>
                <li>
                <a href="http://localhost/d7t/searchKeyword.php?type=bx_photos" target="_self" class="button more_ntop_element">Search</a>
                </li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </div>
    </td>
    <td class="top">
        <a href="http://localhost/d7t/m/poll/&amp;action=poll_home" class="top_link"><span class="down bx-def-padding-sec-leftright">Polls</span>
        <!--[if gte IE 7]><!-->
        </a>
        <!--<![endif]-->
        <div class="sub">
            <!--[if lte IE 6]><table id="mmm"><tr><td><![endif]-->
            <ul class="sub main_elements">
                <li>
                <a href="http://localhost/d7t/m/poll/&amp;action=poll_home" target="_self" class="button more_ntop_element">Polls Home</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/poll/" target="_self" class="button more_ntop_element">All Polls</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/poll/&amp;action=popular" target="_self" class="button more_ntop_element">Popular</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/poll/&amp;action=featured" target="_self" class="button more_ntop_element">Featured</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/poll/calendar" target="_self" class="button more_ntop_element">Calendar</a>
                </li>
                <li>
                <a href="http://localhost/d7t/searchKeyword.php?type=poll" target="_self" class="button more_ntop_element">Search</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/poll/tags" target="_self" class="button more_ntop_element">Tags</a>
                </li>
                <li>
                <a href="http://localhost/d7t/m/poll/categories" target="_self" class="button more_ntop_element">Categories</a>
                </li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </div>
    </td>
    <td class="top">
        <a href="javascript: void(0);" onclick="void(0);" class="top_link">
        <span class="down bx-def-padding-sec-leftright">More</span>
        <!--[if gte IE 7]><!-->
        </a>
        <!--<![endif]-->
        <!--[if lte IE 6]><table id="mmm"><tr><td><![endif]-->
        <div style="position:relative;display:block;">
            <ul class="sub">
                <li class="">
                <div class="sub">
                    <ul class="sub main_elements">
                        <li>
                        <a href="http://localhost/d7t/m/sites/home/" target="_self" class="button more_ntop_element">Sites Home</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sites/browse/all" target="_self" class="button more_ntop_element">All Sites</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sites/browse/admin" target="_self" class="button more_ntop_element">Admin Sites</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sites/browse/users" target="_self" class="button more_ntop_element">User Sites</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sites/browse/top" target="_self" class="button more_ntop_element">Top Rated</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sites/browse/popular" target="_self" class="button more_ntop_element">Popular</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sites/browse/featured" target="_self" class="button more_ntop_element">Featured</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sites/tags" target="_self" class="button more_ntop_element">Tags</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sites/categories" target="_self" class="button more_ntop_element">Categories</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sites/calendar" target="_self" class="button more_ntop_element">Calendar</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sites/search" target="_self" class="button more_ntop_element">Search</a>
                        </li>
                    </ul>
                </div>
                <a href="http://localhost/d7t/m/sites/home/" class="top_link">Sites</a>
                <div class="clear_both sub">
                </div>
                </li>
                <li class="">
                <div class="sub">
                    <ul class="sub main_elements">
                        <li>
                        <a href="http://localhost/d7t/m/sounds/home/" target="_self" class="button more_ntop_element">Sounds home</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sounds/albums/browse/all" target="_self" class="button more_ntop_element">Sound albums</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sounds/browse/all" target="_self" class="button more_ntop_element">All Sounds</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sounds/browse/top" target="_self" class="button more_ntop_element">Top Sounds</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sounds/browse/popular" target="_self" class="button more_ntop_element">Popular Sounds</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sounds/browse/featured" target="_self" class="button more_ntop_element">Featured Sounds</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sounds/tags" target="_self" class="button more_ntop_element">Tags</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sounds/categories" target="_self" class="button more_ntop_element">Categories</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sounds/rate" target="_self" class="button more_ntop_element">Rater</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/sounds/calendar" target="_self" class="button more_ntop_element">Calendar</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/searchKeyword.php?type=bx_sounds" target="_self" class="button more_ntop_element">Search</a>
                        </li>
                    </ul>
                </div>
                <a href="http://localhost/d7t/m/sounds/home/" class="top_link">Sounds</a>
                <div class="clear_both sub">
                </div>
                </li>
                <li class="">
                <div class="sub">
                    <ul class="sub main_elements">
                        <li>
                        <a href="http://localhost/d7t/m/store/home/" target="_self" class="button more_ntop_element">Store Home</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/store/browse/recent" target="_self" class="button more_ntop_element">Recent</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/store/browse/top" target="_self" class="button more_ntop_element">Top Rated</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/store/browse/popular" target="_self" class="button more_ntop_element">Popular</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/store/browse/featured" target="_self" class="button more_ntop_element">Featured</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/store/browse/free" target="_self" class="button more_ntop_element">Free</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/store/tags" target="_self" class="button more_ntop_element">Tags</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/store/categories" target="_self" class="button more_ntop_element">Categories</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/store/calendar" target="_self" class="button more_ntop_element">Calendar</a>
                        </li>
                        <li>
                        <a href="http://localhost/d7t/m/store/search" target="_self" class="button more_ntop_element">Search</a>
                        </li>
                    </ul>
                </div>
                <a href="http://localhost/d7t/m/store/home/" class="top_link">Store</a>
                <div class="clear_both sub">
                </div>
                </li>
                <li class="li_last_round">&nbsp;</li>
            </ul>
        </div>
        <div class="clear_both">
        </div>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </td>
</tr>
</tbody>
</table>

Answer 1

这是很多问题，不只是一个，而且可能不是特别适合 stackoverflow。

你想选择最后一个类为 top 的 td。这应该使用 last-child 选择器来完成:

$( "table.topMenu td.top:last-child" ) // you won't use this, just showing the hierarchy

然后，从这个 td 中，您想要选择每个具有 sub 类的 div。

$( "table.topMenu td.top:last-child div.sub" )

那应该选择你想要的 div 的所有内容。然后您需要像这样在同一部分中选择链接的内容:

$( "table.topMenu td.top:last-child a.top_link" )

您应该将它们存储到 javascript 对象中，如下所示:

var divs = $( "table.topMenu td.top:last-child div.sub" ).remove();
var links = $( "table.topMenu td.top:last-child a.top_link" ).remove();

这些行会将它们从 DOM 中移除，但会保存 jQuery 对象以备后用(请注意，由于这些选择器将获得多个 DOM 元素，此时它们是 jQuery 对象，而不是 DOM 元素)。然后您应该能够根据需要使用适当的选择器附加它们。您可能还想调用:

$( "table.topMenu td.top:last-child" ).remove();

以及清理 DOM。