Issue with jQuery.show()

Question

I am trying to create very simple image browser with jQuery. I am doing it only for learning, it will not be used in any project at this time.

I have images and thumbnails as follows:

<div class="images">
  <img src="http://www.dummyimage.com/400x200/222/fff.jpg" alt="" data-idi="1"/>
  <img src="http://www.dummyimage.com/400x200/534/fff.jpg" alt="" data-idi="2"/>
  <img src="http://www.dummyimage.com/400x200/345/fff.jpg" alt="" data-idi="3"/>
  <img src="http://www.dummyimage.com/400x200/fed/111.jpg" alt="" data-idi="4"/>
</div>

<div class="thumbs">
  <button data-idb="1"><img src="http://www.dummyimage.com/50x50/222/fff.jpg" alt="" /></button>
  <button data-idb="2"><img src="http://www.dummyimage.com/50x50/534/fff.jpg" alt="" /></button>
  <button data-idb="3"><img src="http://www.dummyimage.com/50x50/345/fff.jpg" alt="" /></button>
  <button data-idb="4"><img src="http://www.dummyimage.com/50x50/fed/111.jpg" alt="" /></button>   
</div>

Hovering on thumbnail should replace main image above.

I have managed to do it with one, let's call it ”set” of images, as presented on jsfiddle.net.

Here is simple script used to achieve this:

  $('#images img').hide().first().show();
  $('#thumbs button').on( "mouseover", function(e) {
     var idb = $(this).data("idb");
     $('#images img').hide();
     var img = $('#images').find("[data-idi='" + idb + "']").show();
  });

Now I want to add another set of images, and wrap the script with .each() function. But I am having a problem on very begining, when I am trying to show only first image:

var imgs = $('.images').hide();
$.each(imgs, function( index, val ) {
    var firstImage = $(this).children(":first");
    console.log(firstImage);
    firstImage.show();
});

Proper image is being consoled, but it is not showing, as excepted. Live example on jsfiddle.net. Could you help me with this problem? TIA

Answer 1

Thanks all for your answers, I have upvoted them all. I have managed to improve my script, and now HTML structure looks like below:

<div class="images" data-set='1'>
  <img src="http://lorempixel.com/400/200/sports/1/" alt="" data-idi="a1" />
  <img src="http://lorempixel.com/400/200/sports/2/" alt="" data-idi="a2" />
  <img src="http://lorempixel.com/400/200/sports/3/" alt="" data-idi="a3" />
  <img src="http://lorempixel.com/400/200/sports/4/" alt="" data-idi="a4" />
</div>
<div class="thumbs" data-set="1">
  <button data-idb="a1"><img src="http://lorempixel.com/50/50/sports/1/" alt="" /></button>
  <button data-idb="a2"><img src="http://lorempixel.com/50/50/sports/2/" alt="" /></button>
  <button data-idb="a3"><img src="http://lorempixel.com/50/50/sports/3/" alt="" /></button>
  <button data-idb="a4"><img src="http://lorempixel.com/50/50/sports/4/" alt="" /></button>   
</div> 

And JS script looks as follows:

    var imgs = $('.images');
    $('.images img').hide()
    $.each(imgs, function(index, val) {
        $(val).children(":first").show();
        $('.thumbs button').on( "mouseenter", function(e) {
             var idb = $(this).data("idb"),
                 set = $(this).parent().data("set");
             $('body').find("[data-set='" + set + "']").children("img").hide();
             var img = $('.images').find("[data-idi='" + idb + "']").show();
        });
    });

And working example.

Answer 2

Take a look http://jsfiddle.net/hsuc8/14/

I changed some of your code.

Edit: I changed the previous URL because I changed the code to use the filter function.

Answer 3

Hide all the images and then show the first one:

$('.images img').hide().first().show()

Answer 4

You've already hidden the parent .images element.

After calling .show(), you have a visible element inside a hidden parent.

You need to select the <img> elements themselves by writing $('.images img').