Question

Question
Is there a way to split up each class based upon a prefix using JQuery each and Wildcards?

EDIT: In my case I want to split the elements by rel instead of class.

Background
Right now I am just generating a separate code block for each fancybox group which is a really big hack, but it works. I would like to pull this code out of the php class and put it on the html view, and only have it written once versus having a new block for each example_group. I am sure that there is a way, but for now I am stuck with my temporary hack.

Current Code

        (function($) {//use jquery each
            $("a[rel=example_group$group]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'cyclic'            : true,
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return 'Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '';
                }
            });
        })(jQuery);

SOLUTION

        (function($) {
            $("a[rel^=example_group").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'cyclic'            : true,
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return 'Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '';
                }
            });
        })(jQuery);

Answer 1

$('a[rel^="example_group"]');

This will target any anchor whose rel value begins with “example_group”. That means, it will target all of the following:

<a ... rel="example_group1">Group 1</a>
<a ... rel="example_group2">Group 2</a>
<a ... rel="example_group_ponies">Ponies!</a>

For more information, check out the Attribute Starts With Selector.