CODEWITHSUNDEEP
javascriptjqueryhtml
davidpm4
davidpm4

Reputation: 582

Loop through two lists, grab values from first, add them to the second

http://jsfiddle.net/vr45Ln29/

I would like to loop through the imgs in the first ul, grab the src for each then loop through the second ul imgs and stick the src urls from the first list into the second.

To clarify, I just want the urls to be pulled from the imgs above and pasted into the src attr for each img below.

I simply can't figure it out. Any help would be appreciated.

Upvotes: 0

Views: 38

Answers (1)

Born2Code
Born2Code

Reputation: 1075

i modified your fiddle, here is a version that works

var container = $('.slider-container'),
			bigImgs = container.find('li img');

			
			bigImgs.each(function() {
                $("ul","div.slider-thumbnails").append("<li><img width='150' src='" +$(this).attr("src") + "'/></li>");
				
			});
<div class="main-slider">
	<ul class="slider-container">
		<li>
			<a href="#">
				<img src="http://placehold.it/350x150" alt="one">
			</a>
		</li>
		<li>
			<a href="#">
				<img src="http://placehold.it/500x250" alt="two">
			</a>
		</li>
		<li>
			<a href="#">
				<img src="http://placehold.it/400x200" alt="three">
			</a>
		</li>
		<li>
			<a href="#">
				<img src="http://placehold.it/300x100" alt="four">
			</a>
		</li>
   </ul>
</div>
<!-- Thumbnails -->
<div class="slider-thumbnails">
	<ul>
		
	</ul>
</div>

basically, you can just create the thumbnails dynamically at load.

Upvotes: 1

Related Questions