The problem I see is what happens when there is more than one class?
Your icon call may not be the first class. in which case you would not
have selected it. But it was still supposed to get an icon. Would it
be possible to give the divs that are supposed to receive the icons a
generic class then use an attribute to define what icons it is
supposed to have. You could even reduce the amount of code that you
have to output.
<div class="icon button" img="Star"></div>
$(".button").each(function(){
if ($(this).hasAttribute("img") && $(this).attr("img") != "")
{
$(this).append("<IMG SRC='" + $(this).attr("img") + ".gif'>");
}
)
I know that it is probably not the best code as you are using
attibutes that do not fall into the dom standards but it looks like it
would get the job done.
On Apr 16, 8:51 am, jonhobbs <jon.hobbs.sm...@gmail.com> wrote:
> 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?- Hide quoted text -
>
> - Show quoted text -
