JQuery Lint says: "You've used the same selector more than once." I don't think I have JQuery Lint says: "You've used the same selector more than once." I don't think I have wordpress wordpress

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 redefine var 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);