jQuery .replaceWith不起作用

Question

Google Blogger uses javascript to place a quickedit icon for the admin on widgets or editable areas.

This is the HTML:

<a class="quickedit" href="xxxxxx" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;BlogArchive1&quot;));" target="configBlogArchive1" title="Edit">
<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18">
</a>

I'm trying to replace that image with a Font Awesome Icon. Here is the jQuery that I used:

$('a.quickedit img').replaceWith('<i class="icon-wrench"></i>');

The original image is still there, there are no related errors in the console.log, so why is it not working? BTW, I am using the $(document).ready function, and version 1.7.1.

EDIT: I also noticed that using this breaks all of my other jQuery scripts on the page. So there may be a conflict.

Here is everything without the script I'm trying to add:

<script type='text/javascript'>
  $(document).ready(function() {
    $(&quot;.menu-toggle&quot;).click(function (e) {
        $(this).next(&#39;ul&#39;).slideToggle(&quot;fast&quot;);
    });
    $(&quot;#LinkList1 ul li&quot;).click(function (e) {
        $(this).find(&#39;ul&#39;).slideToggle(&quot;fast&quot;);
    });
    $(&quot;body a, .camera_prev, .camera_next, .camera_pag li&quot;).hover(function(){
        link_audio.play();
    },
    function(){
        link_audio.load();
    });
    $(window).scroll(function(){
        if ($(this).scrollTop() &gt; 100) {
            $(&#39;.scrollup&#39;).fadeIn();
        } 
        else {
            $(&#39;.scrollup&#39;).fadeOut();
        }
    }); 
    $(&#39;.scrollup&#39;).click(function(){
        $(&quot;html, body&quot;).animate({ scrollTop: 0 }, 600);
        return false;
    });
  });
</script>

EDIT AGAIN : No matter what I try, it seems all other scripts break and no longer function with no visual errors or errors in the console.log. View the template/site in question here: http://xarpixels-revitalize-template.blogspot.com/

FYI, only the admin can even see the .quickedit icon.

Answer 1

You can try alternate way. Like this :

$('a.quickedit img').after('<i class="icon-wrench"></i>').remove();

Hope this helps..

Answer 2

As i did not understand the requirement fully, but with others understanding, i have fixed the code, please have a look at this

Fiddle Demo

change in css and js code

$('a.quickedit').append('<i class="icon-wrench"></i>');

Mark as correct, if it fixed your problem

Answer 3

Add this in your CSS class. You need it because the tag i is an inline HTML element. Check this out http://jsfiddle.net/r3GgM/

    .icon-wrench{
     ...
    display:block;
    width: xxxx;
    height: nnnn;
    }