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);
$('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.
Done this many times before. That is if i got the question right :)
Well how i tend to do such thing is where you loop it out you add a class or id to the element. Such as if you have a slider. Then for the controls a typical html could look like:
<ul class="controls">
<li class="control control-1" rel="1"></li>
<li class="control control-2" rel="2"></li>
</ul>
That is typical for me at least. So let's say you're going to do something for every control there is. Easy as this:
$('ul.controls li.control').each(function () {
console.log($(this).attr('rel'));
});
So what you do is you just group them up by having a additional class describing the current group. Then you have another class with a "-idhere" so you can target it directly and then finally the id of it using the rel.
-
Not quite sure i got the question right. But leave a comment on it and if i did't i will see if i have a solution :)