Question

I have the following jQuery code:

  $('.active #search').on('mouseout', function () {
    $('#search_box #search').not('.active').each(function(){
      this.value = $('.active #search')[0].value;
    })
  });

It works, but I have to call $(‘.active #search’) twice. How can I refer to the $(‘.active #search’) array from within my inner function?

P/S: I know I’ll be complained about giving multiple elements same ID, but this seem to be generated by Rails automatically (text_field_tag).

Answer 1

Therese several ways of achieving this:

var activeSearch = $('.active #search');
activeSearch.on('mouseout', function () {
    $('#search_box #search').not('.active').each(function(){
        this.value = activeSearch.val();
    })
});

notice that since this is an id you are querying for you should have only one element so you can replace activeSearch[0].value with activeSearch.val();

second way:

$('.active #search').on('mouseout', function () {
    var activeSearch = $(this);
    $('#search_box #search').not('.active').each(function(){
        this.value = activeSearch.val();
    })
});

when in an event handler $(this) will give you a jquery object of the event sender. you can further simplify it by ignoring jquery and just using plain elements by doing the following:

$('.active #search').on('mouseout', function () {
    var activeSearch = this;
    $('#search_box #search').not('.active').each(function(){
        this.value = activeSearch.value;
    })
});

this is the same as above but you arent dealing with jquery objects.

What you end up using depends on you but the final code snippet would be my preferred way.