okay, since I pretty much solved that question on my own, I'll post my next one here so I don't waste space. I just looked around the jquery documentation and I can't seem to figure out how to get the od of an element. I have set up id's on my links that correspond with id's for my images. The id's are equivalent to the index number of an array. so this is what is generated, essentially:
$.ajax({
type: "GET", url: "js/img.xml", dataType: "xml",error: function(){alert('Error loading XML document');},
success: function(xml) {
$(xml).find('#web image').each(function(){
var imagenum = $(xml).find('#web image').index(this);
$("#webthumblist").append('<li><a href="#" id="' + imagenum +'" ></a></li>');
});
}
});
- $.ajax({
- type: "GET", url: "js/img.xml", dataType: "xml",error: function(){alert('Error loading XML document');},
- success: function(xml) {
- $(xml).find('#web image').each(function(){
- var imagenum = $(xml).find('#web image').index(this);
- $("#webthumblist").append('<li><a href="#" id="' + imagenum +'" ></a></li>');
- });
- }
- });
-
creates this html:
<div id="webthumbcontainer">
<ul id="webthumblist">
<li>
<a href="#" id="[b]0[/b]"></a>
</li>
<li>
<a href="#" id="[b]1[/b]"></a>
</li>
<li>
<a href="#" id="[b]2[/b]"></a>
</li>
<li>
<a href="#" id="[b]3[/b]"></a>
</li>
</ul>
</div>
- <div id="webthumbcontainer">
- <ul id="webthumblist">
-
- <li>
- <a href="#" id="[b]0[/b]"></a>
- </li>
- <li>
- <a href="#" id="[b]1[/b]"></a>
- </li>
- <li>
- <a href="#" id="[b]2[/b]"></a>
- </li>
- <li>
- <a href="#" id="[b]3[/b]"></a>
- </li>
-
- </ul>
- </div>
-
some other functions also grab the link to the images and puts them in a seperate div on the page with corresponding id's like so:
<div id="imagecontainer">
<img src="tadesign/images/carcare.jpg" id="[b]0[/b]">
<img src="tadesign/images/monster.jpg" id="[b]1[/b]">
<img src="tadesign/images/rantingbill.jpg" id="[b]2[/b]">
<img src="tadesign/images/voltecsite.jpg" id="[b]3[/b]">
</div>
- <div id="imagecontainer">
- <img src="tadesign/images/carcare.jpg" id="[b]0[/b]">
- <img src="tadesign/images/monster.jpg" id="[b]1[/b]">
- <img src="tadesign/images/rantingbill.jpg" id="[b]2[/b]">
- <img src="tadesign/images/voltecsite.jpg" id="[b]3[/b]">
- </div>
-
when the user clicks on the generated link, I need to add a class to all elements with the same id. So in this case if I clicked on the second link, which has the id "1", jquery would add the class "active" to both the link and the image with id="1". The problem is, I can't write this function for each id number, because there's no way to tell how many images will be in the page at any given time. So I have to have the javascript read the id attribute, then look through the html for all elements with the same id, and give each of them a class.
Use your words like arrows to shoot toward your goal.
December 10th, 2009, 12:28 pm
