jQuery: select a single element with same class name without repeating code?

Question

I currently have a javascript function that blurs an image when hovered over. Each of these images represents a project, and I have 5 of these projects with the class "individual-project". An img inside an individual project div has the class "project-img".

$('.individual-project').eq(0).hover(function() {
    $('.project-img').eq(0).css({'filter': 'blur(3px)', 'transform': 'scale(1.1, 1.1)', '-webkit-filter': 'blur(3px)', '-webkit-transform': 'scale(1.1, 1.1)', '-moz-filter': 'blur(3px)', '-moz-transform': 'scale(1.1, 1.1)'});
}, function() {
    $('.project-img').eq(0).css({'filter': 'blur(0px) brightness(100%)'});
});

Currently I need to repeat this block 5 times and change the value inside the eq function for each project to blur it without blurring all of the other ones. Any help with the getting the selectors to work for individual divs with the same class would be great. Thanks.

@CertainPerformance Yes, I should have specified. Each .individual-project is a div that has the .project-img and a <p> inside. — tedclark72
– tedclark72, Commented Jul 27, 2018 at 19:34
It would be helpful to post the HTML your code is running on in your question. — CertainPerformance
– CertainPerformance, Commented Jul 27, 2018 at 19:34
@CertainPerformance My apologies. Fortunately, SamVK 's solution below worked. If you still want me to add the html, I will. — tedclark72
– tedclark72, Commented Jul 27, 2018 at 19:39

Taplar · Accepted Answer · 2018-07-27 19:29:01Z

1

If you only want to affect the project image in each project, you want to use a contextual lookup.

$('.individual-project').hover(function(e) {
  $('.project-img', e.target).css({
    'filter': 'blur(3px)',
    'transform': 'scale(1.1, 1.1)',
    '-webkit-filter': 'blur(3px)',
    '-webkit-transform': 'scale(1.1, 1.1)',
    '-moz-filter': 'blur(3px)',
    '-moz-transform': 'scale(1.1, 1.1)'
  });
}, function(e) {
  $('.project-img', e.target).css({
    'filter': 'blur(0px) brightness(100%)'
  });
});

The second argument you can optionally give to the $() method is the context in which to search for the matches. $(selector) is the same as doing $(selector, document). Giving the second argument overrides the default context.

Ref. http://api.jquery.com/jQuery/#jQuery1

edited Jul 27, 2018 at 19:29

answered Jul 27, 2018 at 19:26

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SamVK Over a year ago

Could you not just do $('.project-img', this)?

Taplar Over a year ago

Provided you're not using an arrow function, sure.

Collectives™ on Stack Overflow

jQuery: select a single element with same class name without repeating code?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related