Question

At the moment I’m using the below function to perform a simple slide…

function jeans(jean, links) {

$(links).hide();

$(jean).hover(

  function() {
        $(links).show('slow');
    },

  function() {
        $(links).hide('slow');
});}

And calling it where required with…

jeans('#red-jeans', '#red-jeans ul');
jeans('#blue-jeans', '#blue-jeans ul');
jeans('#yellow-jeans', '#yellow-jeans ul');

I’d like to be able to perform this by just attaching a class on the parent “#red-jeans”.

I’m tring something like

function jeans(selector) {

$(selector 'ul').hide();

$(selector).hover(

  function() {
        $(selector 'ul').show('slow');
    },

  function() {
        $(selector 'ul').hide('slow');
});}

…but my syntax is atrocious!

If someone can point me in the right direction it would be very much appreciated!

---

The issue is now that the slide runs on every element I’ve got the class on. Can anyone recommend an amend that would only activate it on the current hover? I presume a (this) is needed somewhere…

Thanks!

Answer 1

There are several ways you could achieve this in a clean way:

$(selector).find('ul')
$(selector + ' ul')
$('ul', selector)

are all equivalent.

In general I recommend you cache the selectors if you use them more often, because calling $() with a selector inside might be quite expensive. This way you have better performance and less trouble when refactoring.
To make the slides dependent on your current hover, use $(this) instead of the general selector.

function(selector){

  var $element = $('ul', selector);

  $element.hide();

  $(selector).hover(
    function() {
        $(this).find('ul').show('slow');
      },
    function() {
        $(this).find('ul').hide('slow');
  });

}