jQuery selector with specific attribute

Question

I've got this code:

$('a').click(
   function() {
       $("#change_flash").css("display", "block"); $("#my_flash").css("display", "none");
  });

But this one works for all anchor elements. I would like to influence with this script only for anchors elements which contains rel="lightbox" attribute.

How can I achieve it?

Answer 1

$('a[rel="lightbox"]').click(
   function() {
       $("#change_flash").css("display", "block"); $("#my_flash").css("display", "none");
  });

Answer 2

Use the following:

$('a[rel="lightbox"]').click(
    function(){
        // do your stuff here
    });

This is using the attribute="value" notation (see references).

There are, also, other options:

• attribute-begins-with: attribute^="value",
• attribute-ends-with: attribute$="value",
• attribute-contains: `attribute*="value".

Note, of course, that while $('[rel="lightbox"]') is an absolutely valid selector all by itself, this will cause jQuery to examine every element on the page for that attribute and value in order to bind/assign the click event(s); therefore it's always best to use a tag-name, hence the $('a[rel="lightbox"]'), or a class-name in order to limit the number of elements jQuery has to search through to find the matching elements.

Although in modern browsers I seem to remember this 'search' is handed over to the native document.querySelectorAll(), rather than using Sizzle, but even so it's best to limit the amount of work a browser need do.

References:

• attribute-equals selector.
• atrribute-begins-with selector.
• attribute-ends-with selector.
• attribute-contains selector.