javascript - How can I find the source of all images located in multiple classes with the same name? -
i want retrieve source of images located in class cheese. there 4 classes named cheese ever exist in document. each 1 of classes contains 1 image of cheese inside of it.
i'm started learning javascript yesterday because need use c# project i'm working on uses cefsharp. so, i'm sorry if of terms inaccurate.
the following code retrieve source of first 4 images in document. 4 images wanted images of cheese. however, if pictures of flowers above pictures of cheese in document, instead retrieve 3 images of flowers, , 1 image of cheese. don't want, because it's inaccurate.
<!doctype html> <html> <body> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/pacific_rock.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/oak_smoked.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/labne.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/exho.jpg"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/146500lz.jpg"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/90926mrdv3ch8z.jpg"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/91317lz.jpg"></div> <script> <!-- stores collection of <img> elements in document in variable called pictures --> var pictures = document.images; <!-- stores first <img> element in document in variable called firstpicture --> var firstpicture = pictures[0].src; var secondpicture = pictures[1].src; var thirdpicture = pictures[2].src; var fourthpicture = pictures[3].src; <!-- displays alert box showing first, second, third, , fourth <img> element in document --> alert(firstpicture + "\n" + secondpicture + "\n" + thirdpicture + "\n" + fourthpicture) </script> </body> </html> the following code retrieve source of 4 images of cheese more accurately targeting of images inside of content class. following code still accomplish main goal if images of flowers above images of cheese in document.
<!doctype html> <html> <body> <div class="content"> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/pacific_rock.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/oak_smoked.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/labne.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/exho.jpg"></div> </div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/146500lz.jpg"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/90926mrdv3ch8z.jpg"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/91317lz.jpg"></div> <script> var pictures = document.getelementsbyclassname('content')[0]; var firstpicture = pictures.getelementsbytagname('img')[0].src; var secondpicture = pictures.getelementsbytagname('img')[1].src; var thirdpicture = pictures.getelementsbytagname('img')[2].src; var fourthpicture = pictures.getelementsbytagname('img')[3].src; alert(firstpicture + "\n" + secondpicture + "\n" + thirdpicture + "\n" + fourthpicture) </script> </body> </html> the 2 blocks of code above examples. real document's code following:
<!doctype html> <html> <body> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/146500lz.jpg"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/90926mrdv3ch8z.jpg"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/91317lz.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/pacific_rock.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/oak_smoked.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/labne.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/exho.jpg"></div> <script> var pictures = document.images; var firstpicture = pictures[0].src; var secondpicture = pictures[1].src; var thirdpicture = pictures[2].src; var fourthpicture = pictures[3].src; alert(firstpicture + "\n" + secondpicture + "\n" + thirdpicture + "\n" + fourthpicture) </script> </body> </html> how can accurately target 4 cheese classes , return source of images inside of classes? there ever 1 image of cheese in each class , want store value of each image variable , display them in alert box. i'm not wanting guys hand on code me , that's that. explanation of how works.
thanks taking time read question! :)
this question has been answered, jfriend00.
i using following code accomplish desired result:
<!doctype html> <html> <body> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/146500lz.jpg"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/90926mrdv3ch8z.jpg"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/91317lz.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/pacific_rock.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/oak_smoked.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/labne.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/exho.jpg"></div> <script> var imgs = document.queryselectorall(".cheese img"); var img1 = imgs[0].src; var img2 = imgs[1].src; var img3 = imgs[2].src; var img4 = imgs[3].src; alert(img1 + "\n" + img2 + "\n" + img3 + "\n" + img4) </script> </body> </html>
you can use selector query targeted images:
var imgs = document.queryselectorall(".cheese img"); (var = 0; < imgs.length; i++) { console.log(imgs[i].src); } this find <img> tag child of object class="cheese" , loop through collection of imgs found. document.queryselectorall() returns nodelist array-like object (it doesn't have actual array methods on it, have .length , can index [i]).
you can read more document.queryselectorall() here on mdn. takes css selector string input , return nodelist of matching dom elements.
if wanted .src urls in array, this:
var imgs = document.queryselectorall(".cheese img"); var srcarray = []; (var = 0; < imgs.length; i++) { srcarray.push(imgs[i].src); } // srcarray holds urls here or, little more advanced:
var srcarray = array.prototype.map.call(document.queryselectorall(".cheese img"), function(img) { return img.src; }); here's working snippet:
var srcarray = array.prototype.map.call(document.queryselectorall(".cheese img"), function(img) { return img.src; }); document.getelementbyid("results").innerhtml = srcarray.join("<br>");#results { margin-bottom: 30px; }<div id="results"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/146500lz.jpg"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/90926mrdv3ch8z.jpg"></div> <div class="flowers"><img src="http://cdn1.1800flowers.com/wcsstore/flowers/images/catalog/91317lz.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/pacific_rock.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/oak_smoked.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/labne.jpg"></div> <div class="cheese"><img src="http://www.cheese.com/media/img/cheese/exho.jpg"></div>
Comments
Post a Comment