Can I optimize this jQuery 'toggle' image source function?

I have this functionality witch i am not sure is the best. It is actually working. I'm asking because i couldn't find any 'copy-paste' solution over the net so i wrote this. There no need to suggest other CSS solutions, i am stuck with the <a href><img>text</a> structure and i am UNABLE to write .css (all this because of back-end coding restrictions/ ' they are overwhelmed : lol ' )

javascript (an easy way to let the client build his own icon set [stuck with .png]) :

$(".list-habiliy").on({
        mouseenter: function(){
            $('img.icone', this).attr("src",$('img.icone', this).attr("src").replace('.png', '-o.png'));
        },
        mouseleave: function(){
            $('img.icone', this).attr("src",$('img.icone', this).attr("src").replace('-o.png', '.png'));
        }
    },"a");

html (the list of <a> can come up to 30 elements) :

<div class="list-habiliy">
    <a href="some-link1.link"><img class="icone" src="/path/to/default/icons/icon-24px-icon-name1.png" alt="" width="24" height="24" />Some text1</a>
    <a href="some-link2.link"><img class="icone" src="/path/to/default/icons/icon-24px-icon-name2.png" alt="" width="24" height="24" />Some tex2t</a>
    <a href="some-link3.link"><img class="icone" src="/path/to/default/icons/icon-24px-icon-name3.png" alt="" width="24" height="24" />Some text3</a>
    <a href="some-link4.link"><img class="icone" src="/path/to/default/icons/icon-24px-icon-name4.png" alt="" width="24" height="24" />Some text4</a>
</div>

The goal of the function is to replace the icon <img> from within an <a> by adding/removing '-o' text from image source. I'm wondering, should i use the .each(), the hover() for performance reason ?

jsFiddle :

http://jsfiddle.net/5dpaA/

Is this the best way to do it ?

Thanks for all your advices.

[Finaly]:

Explained by user @Xotic750 [accepted answer] (Instead of wrapping this in jquery we use the event attribute and directly access the elements using javascript, we also don't perform any further jquery searches..)

This was somehow the only optimisation i could make.

thanks to user @codelio [i can't accept 2 answers] for is shortened code writing :

$(".list-habiliy a").on({
    mouseenter: function (e) {
        var elm=e.delegateTarget.firstChild;
        elm.src=elm.src.replace('.png','-o.png');
    },
    mouseleave: function (e) {
        var elm=e.delegateTarget.firstChild;
        elm.src=elm.src.replace('-o.png','.png');
    }
});

Answers


Here is another solution, uses jquery event delegation, so only 1 event handler (well 2, one for mounseenter and one for mouseleave) attached to list-habiliy, if you had multiple such structures then you could attach it to document,body and change the selectors to list-habiliy a,img. Instead of wrapping this in jquery we use the event attribute and directly access the elements using javascript, we also don't perform any further jquery searches as we are now assuming that your html pattern does not deviate from that which you have stated. Still, would be pretty difficult to measure it's improvement as it is a user fired event, but it should be faster than your jquery only methods.

HTML

<div class="list-habiliy">
    <a href="some-link1.link"><img class="icone" src="http://placehold.it/64x64/&text=.png1" alt="" width="64" height="64" />Some text1</a>
    <a href="some-link2.link"><img class="icone" src="http://placehold.it/64x64/&text=.png2" alt="" width="64" height="64" />Some tex2t</a>
    <a href="some-link3.link"><img class="icone" src="http://placehold.it/64x64/&text=.png3" alt="" width="64" height="64" />Some text3</a>
    <a href="some-link4.link"><img class="icone" src="http://placehold.it/64x64/&text=.png4" alt="" width="64" height="64" />Some text4</a>
</div>

Javascript

$(".list-habiliy").on("mouseenter", "a,img", function (evt) {
    var target = evt.target;

    if (target.nodeName === "IMG") {
        target.src = target.src.replace('.png', '-o.png');
    } else {
        target.firstChild.src = target.firstChild.src.replace('.png', '-o.png');
    }
}).on("mouseleave", "a,img", function (evt) {
    var target = evt.target;

    if (target.nodeName === "IMG") {
        target.src = target.src.replace('-o.png', '.png');
    } else {
        target.firstChild.src = target.firstChild.src.replace('-o.png', '.png');
    }
})

On jsfiddle


this will allways find the hovered child which is your img, and it's fast!

$(".list-habiliy a").on({
    mouseenter: function (e) {
        //faster is not possible!
        var elm=e.delegateTarget.firstChild, src=elm.src.replace('.png','-o.png');
        elm.src=src;
    },
    mouseleave: function (e) {
        //same a bit jQuery stylish
        var elm=e.delegateTarget.firstChild, src=elm.src;
        $(elm).attr('src',src.replace('-o.png','.png'));
    }
});

sorry there is a shorter one. :)

$(".list-habiliy a").on({
    mouseenter: function (e) {
        var elm=e.delegateTarget.firstChild;
        elm.src=elm.src.replace('.png','-o.png');
    },
    mouseleave: function (e) {
        var elm=e.delegateTarget.firstChild;
        elm.src=elm.src.replace('-o.png','.png');
    }
});

Need Your Help

Unity3d Script from Native Android Service

android unity3d android-service unityscript

I have a native Android service running in the background that needs to interface with a Unity3D script. I'm aware of the following method:

How do I merge the headers from one csv file with another csv file in R?

r csv merge

What I'm trying to ask is, how would I use the headers from one csv as the headers for another csv file? It would kind of be like a merge, except the first csv file is JUST headers, and the second ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.