jquery function applying css to image

Question

Well this is my code:

(function($) {
var images = $( "img" );
$("div.featured-card-box").find(images)[1].css("display", "none");
});

It is supposed to apply some css to an image but it doesn't work and as I'm very new to this I have no idea what's wrong. Big thanks for any answers!

Answer 1

Your code looks a little more complicated that necessary:

1) Note that jQuery [1] will be the second image because it starts counting at 0. It will also be a DOM object instead of a jQuery one, so you will not be able to use jQuery methods on it (like you are trying to do).

2) With jQuery, you can access the images using the same method as CSS selectors:

$("div.featured-card-box img")[1]

Assuming you want the second image in the div with the class of "featured-card-box" to be hidden, this should do the trick:

$("div.featured-card-box img:eq(1)").hide();

Although, you could equally well replace .hide() with .css('display','none')

Edit: Here's a Fiddle: https://jsfiddle.net/vf8d9ske/