Run jQuery to faster to apply to each element without redundancy

Question

The following script works well to both truncate a link and add an icon class BUT, It was too slow: using document.ready to hold the code from executing UNTIL all the elements on a page loaded.

I removed it, AND it works BUT it won't work on the last element

<script>

         jQuery.noConflict();

         jQuery(".resultAction").each(function(){ 

    var fileName =  jQuery(this).find('a').html()
    var fileExtension = fileName.substring(fileName.lastIndexOf('.') );
    var nameChars= fileName.length;
    var shorter=fileName.substring(0,10)+"...";
           //apply style to relative to file extension
        if(fileExtension=="jpg"||"pdf"||"mov"){
        jQuery(this).find("#indicator").addClass("is" + fileExtension.slice(1) );
        }
           //no file extension hide the icon div "indicator"
        if((fileExtension.indexOf('.') == -1)){
        jQuery(this).find("#indicator").addClass("not");
        }
            //truncate text
        if(nameChars>10){
            jQuery(this).find('a').text(shorter);
        }
         });


    </script>

so I got rid of the .ready above and added this over again:

<script>
jQuery(document).ready(function(){
jQuery.noConflict();
jQuery(".resultAction:last").each(function(){ 
//-SAME CODE ABOVE-....
</script>

-notice the :last -which of course works -but it's redundant and I was wondering if there is a more efficient way to both make this code run instantly (as the page loads each element) and completely instead of running two identical scripts one to run fast, and one to apply to the last item it missed.

I dont think that this will be the cause of it running slow; however, you appear to be searching for an element with the id of indicator within each of the elements with the class resultAction. This should not be the case because ids are supposed to be unique. You most likely need to change that to a class. — Josh Mein, Sep 12 '12 at 18:38

jfriend00 · Accepted Answer · 2012-09-12T18:45:59.623

Common code can be put in a function and called from both places you use it, thus only having one copy of the code, but called from multiple places.

jQuery(".resultAction:last").each(processResult);

and

jQuery(".resultAction").each(processResult);

As for speeding up jQuery(".resultAction:last"), there are some options:

Give the last one an id and fetch it directly using the id.
Instead of running it on domReady, run it from a script tag right at the end of the <body>. This will execute a little sooner than domReady and be just as safe.
Do your query on jQuery(".resultAction") just once and save that result. You can then use the whole list or the last one at any time without any further DOM lookups.
If speed is really an issue, jQuery is often not the fastest way to do things (though the speed differences are usually not noticed). For example, document.getElementById("item") is more than 10x faster than jQuery("#item").

Also, something is probably wrong with this code:

jQuery(this).find("#indicator")

There should only be one #indicator id in your entire document so you should not need to confine it to the this context. So, either you can just use $("#indicator") to get the one object like that or you need to be using a class instead of an id because there are multiple objects like this in the page.

Thanks, I forgot I could just write a function and call it on demand -duh MUCH faster! — namretiolnave, Sep 12 '12 at 19:23

Run jQuery to faster to apply to each element without redundancy

1 Answers1