Question

I have a tag cloud widget in my sidebar and I also have a search box in my sidebar. I want to take the search box and move it underneath the <h3> in the widget tag cloud, so that it appears before the actual tags.

This is the Jquery I tried. I tried to prepend the search box before class tagcloud (which has the actual tags.

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

Can you explain to me why it doesn’t work? (Note, I have a few other jquery functions in my document that alter the tag cloud that. Maybe they are interfering? I copied them at the bottom)

This is the tagcloud html

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

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

  </div>

I also have a search box

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

Other Jquery functions in my document

 $(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

This can work for you.

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

Bonus:

For some extra info, your “other jquery functions” should be changed. You really should remove the $(function() calls. you should only use it once on a page. This function call is really just document.ready monitoring.

$(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');
});