grouping inside a for loop & modifying span elements according to style attribute

Question

I have a set of span elements on a page. They are positioned with some information that they receive from the backend and the style attribute is changed accordingly with a previous javascipt execution.

It's like a map.

On the map there are several spots and every spot has a name. But some spots might have several names.

<span class="myimages" id="tag-14" style="position: absolute; left: 191px; top: 217px;">hello</span>
<span class="myimages" id="tag-15" style="position: absolute; left: 141px; top: 112px;">bye</span>
<span class="myimages" id="tag-16" style="position: absolute; left: 191px; top: 217px;">welcome</span>
<span class="myimages" id="tag-17" style="position: absolute; left: 50px; top: 12px;">lunch</span>

What I want to do is I want to create groups inside this array of objects so that I can modify them as I wish.

I want to do something like creating an array and then getting the ones who share the same attribute (same position) and then do something which only would affect that group of span elements but not the other ones.

The first part I'm able to fulfill :

function foam()
    {
    var menus = document.getElementsByClassName("myimages");

         for (var i=0; i < menus.length ; i++)
            {
                menuposition = menus[i].getAttribute("style");
                menus[i].setAttribute('style', menuposition+'background-color:pink;');
            }
    }

But this ofcourse changes the style attribute of every element, I want to be able to make a loop inside a loop, or create conditions or something to fulfill this.

Thanks in advance.

UPDATE: I can't assign a class name automatically. The position information is coming from a flat list of like: "spot name, spot names coordinate on the image" and only info that tells that one spot is the same is the x & y coordinate... It's somehow limiting but it's the case.

Also I'd be modifying a few attributes more than changing just the background color.

MaxArt · Answer 1 · 2012-06-23T09:08:36.173

First, you shouldn't use the style attribute to actually change the style of an element. You should use the style object property, so you do:

menus[i].style.backgroundColor = "pink";

And this keeps the remaining style properties, since they're all listed in the style object. And even if you want the list of all the style properties set, you can use menus[i].style.cssText, which isn't available in older IE (<8 IIRC), but that won't be a problem since I see you're using getElementsByClassName.

Then, let's see your problem. If you think you can rely on the <span> coordinates, you can filter them out like this:

var menus = document.getElementsByClassName("myimages");
for (var i=0; i < menus.length ; i++) {
    if (menus[i].style.left === x + "px" && menus[i].style.top === y + "px") {
        menus[i].style.backgroundColor = "pink";
    }
}

This assigns the background color "pink" to all those images the have the same left and top style properties (equal to x and y pixels). Maybe it isn't exactly what you want (please explain it a little more), and maybe you may want to limit the condition to the left property only, or top.

But my advice in the end is to set another style class to the elements so that all the work can be made easier, or even totally via CSS. Just to be clear:

<span class="myimages group-1" id="tag-14">hello</span>
<span class="myimages group-2" id="tag-15">bye</span>
<span class="myimages group-1" id="tag-16">welcome</span>
<span class="myimages group-3" id="tag-17">lunch</span>

This is the relevant CSS:

.myimages {position: absolute;}
.group-1 {
    left: 191px;
    top: 217px;
    background-color: pink;
}
...

And there's nothing left to do but to actually dinamically assign the classes.

Following the advent of jQuery, I don't do much `style` parsing and manipulation, but I foggily remember there being issues (before I was assimilated). Anyways, I found this interesting [question](http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element) dealing with getting all elements by style. Ironically, the accepted answer uses pure Javascript. — Jared Farrish, Jun 23 '12 at 08:56
Thanks. Infact I learned a million. (I couldn't vote because I don't have any points yet.) I'll update under my text. I'm not able to assign dynamically the classses because the list and the position style attributes are coming from a flat list. I need to find a way to group them. — Tarantula, Jun 23 '12 at 10:36

grouping inside a for loop & modifying span elements according to style attribute

1 Answers1