使用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> 

0123在我的文檔個

其他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"); 
});