JQuery Lint says: "You've used the same selector more than once." I don't think I have
There are a number of things going wrong here.
- The jQuery
document.ready
functions pass the jQuery object as a parameter, so you can use$
inside the function without fear of collision. - In
img.each
, you redefinevar f
multiple times. - You're recreating new jQuery objects off of the same selector multiple times in your functions.
- It's generally considered good form to use
var
once per function, at the top of the function; this helps you avoid mistaken redeclarations, as well. - You are creating multiple
offset
objects; just call it once, then use the members of the resulting object. - jQuery objects return
self
, so you can chain calls! This lets you clean up your code a lot. - You're creating a new jQuery object out of an existing jQuery object (
imgBefore
); no need to do that. Additionally,.css()
can take an object rather than a string, which makes updates a fair bit easier/cleaner.
Refactored:
jQuery(document).ready(function($) { $('img[title*="after"]').addClass('after'). parents('dl.gallery-item').addClass('after'); $('img[title*="before"]').addClass('before'). parents('dl.gallery-item').addClass('before'); //the following gives each image a 'name' attribute based on the caption, collapsed. $('img').each(function() { var $this = $(this), f; f = $this.parents('dl.gallery-item').find('dd').text().replace(/\s/g, ''); $this.attr('name', f); }); //the following takes each 'name' attribute, finds the before, and sticks it behind the after $('img.after').hover(function() { var $this = $(this), offset = $this.offset(); $('img.before[name="' + $this.attr('name') + '"]').css({ top: offset.top, left: offset.left, position: 'absolute', 'z-index': 999 }); });});
The error message may be misleading:. The issue I see is that:
jQuery(imgBefore)
is redundant. imgBefore
is already a jQuery node set. You can just use:
imgBefore.css(css_string);
First thing I see here is that your last line is wrong:
jQuery(imgBefore).css(css_string);
It should be:
imgBefore.css(css_string);