使用jQuery更改列表项的位置

Question

我的侧边栏中有一个标签云小部件，我的侧边栏中也有一个搜索框。我想把搜索框移动到小部件标签云中的<h3>下面，这样它就会出现在实际的标签之前。

这是我尝试过的Jquery。我试着把搜索框放在tagcloud类的前面(它有实际的标签。

$(document).ready(function() {$('.tagcloud').prepend($('search'));  })

你能给我解释一下为什么它不工作吗？(请注意，我的文档中还有其他几个jquery函数，它们改变了标签云。也许他们是在干扰？我在底部复制了它们)

这是tagcloud html

<li class="widget widget_tag_cloud" id="tag_cloud-3">
     <h3>My Stupid Blog</h3>

  <div class=tagcloud">
   {irrelevant tag links }

  </div>

我还有一个搜索框

<li class="widget thesis_widget_search" id="search">  
    {search html}
</li>

我的文档中的其他Jquery函数

 $(function () {
    $('a[class^="tag-link"]').css('fontSize', '1.3em');
    $('a[class^="tag-link"]:odd').css('color', '#A1422F');
    $('a[class^="tag-link"]:even').css('color', '#1E2582');
});


 $(function () {
    $('#s').val('search box');
});

Answer 1

这可以为你工作。

$(function() {
    var searchHtml = $("#search").html();
    $("#search").remove();
    $(".tagcloud").before(searchHtml);
});

奖励：

对于一些额外的信息，您的“其他jquery函数”应该更改。您真的应该删除$(function()调用。您只能在一个页面上使用它一次。这个函数调用实际上只是document.ready监控。

$(function () {
    var searchHtml = $("#search").html();
    $("#search").remove();
    $(".tagcloud").before(searchHtml);

    $('a[class^="tag-link"]').css('fontSize', '1.3em');
    $('a[class^="tag-link"]:odd').css('color', '#A1422F');
    $('a[class^="tag-link"]:even').css('color', '#1E2582');

    // Not sure what this is, unless you have an element with id="s"
    $('#s').val('search box');
});

Answer 2

尝试如下所示：

$(function() {
    $("#search").remove().insertBefore("#tag_cloud-3");
});