Better way to select elements based on href value

Is there a better way to do this in jQuery? Depending on the 开发者_Python百科end part of a href I'm running some code. The current version sure is ugly...

$(document).ready(function(){

    $('a[href$="pdf"], a[href$="zip"], a[href$="doc"], a[href$="docx"], a[href$="xls"], a[href$="xlsx"], a[href$="ppt"], a[href$="pptx"], a[href$="mp3"], a[href$="txt"], a[href$="vsd"], a[href$="rar"], a[href$="wma"], a[href$="avi"], a[href$="mmv"]').bind("click", function() {
        // do processing here
    });

});

I am unable to add ID or class attributes as the html is generated by a CMS

---

Ever consider externalizing the selectors from the logic?

var x = new Array(); 
x = ['pdf', 'zip', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'mp3', 'txt', 'vsd', 'rar', 'wma', 'avi', 'mmv']; 

for (y in x)
{
    $('a[href$="'+y+'"]').click(function()
    {
        // do processing here
    });
}

---

$(document).ready(function(){
    var extensions = ["doc", "xls", "ppt"]; // can extend this
    $('a').filter(function() {
        var href = $(this).attr('href');
        for(var i = 0; i < extensions.length; i++) {
            if(href.substring(href.length - extensions[i].length) == extensions[i]) {
                return true;
            }
        }
    }).bind('click', function(){

    });

});

---

Try "data-" attribute.

Your code would look like this:

<div class="files">
    <a href="file.pdf" data-extension="pdf">filename.pdf</a>
    <a href="file.zip" data-extension="zip">filename.zip</a>
</div>

Javascript:

$('div.files a').bind("click", function() {
       // do processing here
       var extension = $(this).data("extension");
});

---

What about:

$('a:not[href$="htm"]')

Obviously swap out htm for whatever extension is standard on your site.

---

You could try a custom selector. So given the correct code you could do something like:

$('a:HrefMatch').click(function(){
});

And the implementing selector code might look something like

$.extend($.expr[':'], {  
    HrefMatch: function(elem) {  
        var elemHref= $(elem).attr("href");
        var searchRegex = /((pdf)|(zip)|(doc)|(docx)|(xls)|(xlsx)|(ppt)|(pptx)|(mp3)|(txt)|(vsd)|(avi)|(mmv))$/
        return elemHref.test(searchRegex);  
    }  
}); 

(I haven't quite inlcuded all the doc types in the regex, but you could happily include them yourself)

Also, I've separated the selector out into 3 lines of code. It could just as easily be:

$.extend($.expr[':'], {  
    HrefMatch: function(elem) {  
        return $(elem).attr("href").test(/((pdf)|(zip)|(doc)|(docx)|(xls)|(xlsx)|(ppt)|(pptx)|(mp3)|(txt)|(vsd)|(avi)|(mmv))$/);  
    }  
}); 

---

Your selector is wrong and also instead of selecting so many elements try this

//this will attach click event only to 
$(document).ready(function(){

    $('a').live('click', function() {//Use any class name associated to this anchor or an id to select it

       //this.href will give the href of the anchor which is clicked.
       //check for href contians the required extension or no by writing a switch block or if/else conditions

      var extn = (/[.]/.exec(this.href)) ? /[^.]+$/.exec(this.href) : undefined;
      if(extn)
         extn = extn[0];

       // do processing here
       switch(extn.toLowerCase())
       {
          case "pdf" :
               break;
          case "zip" :
               break;

          ...
          ...

       }

    });

});