We help IT Professionals succeed at work.

Javascript DOM help...

jrattinger
jrattinger asked
on
Hi,

I have a simple question, that is driving me crazy. I need to dynamically via javascript add a "rel" attribute to an anchor tag.

The current line is:
     <a class="detailImage" href="#">

What i need is:
     <a class="detailImage" href="#" rel="pic_group">

You can see it in context of the page here:
<div id="DetailGroup1" style="display:none;">
	<div border="0" cellpadding="3" cellspacing="0" width="190">
		<div valign="top" colspan="5" class="detail-text"  nowrap><h4>ADDITIONAL IMAGES</h4><span class="copy8MGray">(CLICK TO VIEW LARGER)</span><br><br></div>
		
		<div style="text-align:center;">
				
			<div id="Detail1" style="display:none; margin:0 5px 0 5px; border:1px solid black; float:left;">
						
				<!-- This is the one i need to change -->
				<a class="detailImage" href="#">
					 <img src="<%=getCurrentAttribute('item','custitem_detail_image_1_sm')%>" width="55" height="55"  alt="" border="0"></a>
			</div>
		</div>
	</div>
</div>

Open in new window

Comment
Watch Question

You can do this through DOM manipulation. There are several methods for adding attributes:

First, you need a reference to the 'a' element, i.e. document.getElementsByClassName(names); or some similar method:

els = document.getElementsByClassName("detailImage");

Open in new window


Then, set the attribute:

for (var i = 0; i < els.length; i ++) els[i].setAttribute('rel', 'pic_group');

Open in new window


Or:

for (var i = 0; i < els.length; i ++) {
   z = document.createAttribute('rel');
   z.value = 'pic_group';
   els[i].setAttributeNode(z);
}

Open in new window


YMMV on old versions of IE, but both should work on IE6+ and other popular browsers (setAttribute doesn't work with certain attributes, hence the setAttributeNode method.)  

Author

Commented:
Thanks! great answer, only one problem... I didn't give you enough code to help zero in on the correct element. the code will be displaying a lightbox for images, so the same class "detailImage" is used often. I don't know how to zero in on a specific instance. I can hard code for each element or do some sort of loop.

Here's a little more code:
   
<div class="detail-image">
	<a class="detailImage" href="<%=getCurrentAttribute('item','custitem_main_popup')%>" rel="pic_group">
		<img style="border:0 none;" alt="detailImage" src="<%=getCurrentAttribute('item','storedisplayimage')%>" />
		<img style="border:0 none;" alt="Enlarge Image" src="/site/images/_ui/click-image-to-expand.png" />
	</a>
</div>


<div id="DetailGroup1" style="display:none;">
	<div border="0" cellpadding="3" cellspacing="0" width="190">
		<div valign="top" colspan="5" class="detail-text"  nowrap><h4>ADDITIONAL IMAGES</h4><span class="copy8MGray">(CLICK TO VIEW LARGER)</span><br><br></div>
		
		<div style="text-align:center;">
				
			<div id="Detail1" style="display:none; margin:0 5px 0 5px; border:1px solid black; float:left;">
						
				<!-- This is the one i need to change -->
				<a class="detailImage" href="#">
					 <img src="<%=getCurrentAttribute('item','custitem_detail_image_1_sm')%>" width="55" height="55"  alt="" border="0"></a>
			</div>

			<div id="Detail2" style="display:none; margin:0 5px 0 5px; border:1px solid black; float:left;">
						
				<!-- This is the one i need to change -->
				<a class="detailImage" href="#">
					 <img src="<%=getCurrentAttribute('item','custitem_detail_image_2_sm')%>" width="55" height="55"  alt="" border="0"></a>
			</div>
			<div id="Detail3" style="display:none; margin:0 5px 0 5px; border:1px solid black; float:left;">
						
				<!-- This is the one i need to change -->
				<a class="detailImage" href="#">
					 <img src="<%=getCurrentAttribute('item','custitem_detail_image_2_sm')%>" width="55" height="55"  alt="" border="0"></a>
			</div>

		</div>
	</div>
</div>

Open in new window

Top Expert 2013

Commented:
Give the target an id then you can:

EL=document.getElementById('someid');
// then use the code already given to you by AngryBinary with EL as the target

Open in new window


No points to me... just helping out a little

Cd&
Assuming you don't have the option to add an id to the links in question (since then you could probably add the "rel" attribute as well), you can use other means to identify which tags to change.

In this case, it would probably work to get a reference to the DetailGroup1 div (document.getElementById("DetailGroup1")), and query just among the sub-elements:

var detailGroup1 = document.getElementById("DetailGroup1");

// get only the anchor tags inside the DetailGroup1 div
var els = detailGroup1.getElementsByTagName("a");

// may not be necessary to filter by className at this point, but just in case
var re = new RegExp('\\b' + 'detailImage' + '\\b');

for (var i = 0; i < els.length; i ++) {
   // classname filter
   if(re.test(els[i].className)) {
       els[i].setAttribute('rel', 'pic_group');
   }
}

Open in new window

Top Expert 2013

Commented:
You don't actually have to iterate through.  The target tag has a parent with an id

so:

EL= document.getElementById('Detail1').firstChild;
would return the a element under that div.

so all that would be necessary is to pass the id of the parent to the function that then uses the id to find the child modifies the child atributes.


Cd&
Assuming that the images come from a database of images, and there may be a variable number of Detail divs, it would still require iterating through possible parent IDs. For instance, there are 3 Detail divs in the example - Detail1, Detail2, Detail3. What if there were 8 of them? Remember the 0, 1, or infinity rule... there is no such thing as "3".

By the same token, there may also be multiple DetailGroup divs, in which case even my solution would need another layer of recursion to work in all scenarios.

Finally, firstChild is dodgy since in some older browsers it may refer to an empty text node between the opening "div" tag and opening "a" tag (example of this problem here: http://www.javascriptkit.com/domref/nodetype.shtml). It's better to be as explicit as possible about the target of modification.

Author

Commented:
Great help! Thanks!!!