Here is some psuedo-code for what I'm trying to achieve...
$(".button").each(function(){
// Get an array of classes that are attached to $(this)
// Loop through the array classes
for (items in array){
// check to see if the class starts with "icon"
if(className.startswith('icon')){
// remove the first 4 characters
var iconName = className.substring(4, className.length);
// Use the remainder to append the image
$(this).append("<IMG SRC='" + iconName + ".gif'>");
}
}
});
That way, I could have hundreds of possible icons and I wouldn't have
to have hundreds of IF statements and hundreds of calls to .hasClass()
On Apr 16, 2:16 pm, MorningZ <morni...@gmail.com> wrote:
> Well, other than asking whether or not an object "has a class or
> doesn't", there isn't much you can do that check each class name
>
> so like (and this assumes your original HTML, not the separated class
> name) :
>
> var icons = ["Star", "Plus", "Left", "Right", "Up", "Down"];
> $("div.button").each(function() {
> var $dv = $(this);
> $.each(icons, function() {
> if ($dv.hasClass("icon" + this)) {
> $dv.append('<img src="Images/' + this + '.gif"
> alt="" />');
> return false;
> }
> });
>
> });
>
> On Apr 16, 9:08 am, jonhobbs <jon.hobbs.sm...@gmail.com> wrote:
>
> > Thanks MorningZ, but does that dolve the problem?
>
> > I'd still have to do a .hasClass() for each possible icon, wouldn't I?
>
> > On Apr 16, 2:03 pm, MorningZ <morni...@gmail.com> wrote:
>
> > > It would be MUCH easier and cleaner to separate "icon" and "Star/
> > > PlusLeft/Right/Up/Down", a la:
>
> > > <div class="button icon Star"></div>
> > > <div class="button icon Plus"></div>
> > > <div class="button icon Left"></div>
> > > <div class="button icon Right"></div>
> > > <div class="button icon Up"></div>
> > > <div class="button icon Down"></div>
>
> > > If that's possible, that seriously would make your code easier and
> > > less complicated
>
> > > On Apr 16, 8:58 am, jonhobbs <jon.hobbs.sm...@gmail.com> wrote:
>
> > > > This might be hard to explain, but I need a way to loop through a
> > > > bunch of elements I've already selected and for each one find classes
> > > > that start with the word "icon". So for example I might have the
> > > > following elements
>
> > > > <div class="button iconStar"></div>
> > > > <div class="button iconPlus"></div>
> > > > <div class="button iconLeft"></div>
> > > > <div class="button iconRight"></div>
> > > > <div class="button iconUp"></div>
> > > > <div class="button iconDown"></div>
>
> > > > So, I begin by selecting the elements and looping through them....
>
> > > > $(".button").each(function(){
> > > > // Some code here
>
> > > > });
>
> > > > Now, I could put the following code in the loop...
>
> > > > if ($(this).hasClass("iconStar")){
> > > > $(this).append("<IMG SRC='Images/star.gif'>");
>
> > > > }
>
> > > > I would then have to repeat that for each possible icon, which seems
> > > > very inefficient.
>
> > > > What I'd like to do in the "each" loop is just cycle through all the
> > > > classes that $(this) has and pick out the one that begins with ICON
> > > > and then use that to append the image.
>
> > > > Can anyone help?
