Question

I have this script in my asp.net page:

<script type="text/javascript">
  var mouseover_tid = [];
  var mouseout_tid = [];

  jQuery(document).ready(function () {
      jQuery('.menus > li').each(function (index) {
          jQuery(this).hover(

                function () {
                    var _self = this;
                    clearTimeout(mouseout_tid[index]);
                    mouseover_tid[index] = setTimeout(function () {
                        jQuery(_self).find('ul:eq(0)').fadeIn(200);
                    }, 400);
                },

                function () {
                    var _self = this;
                    clearTimeout(mouseover_tid[index]);
                    mouseout_tid[index] = setTimeout(function () {
                        jQuery(_self).find('ul:eq(0)').fadeOut(200);
                    }, 400);
                }

            );
      });

      jQuery('.menus > li > .children > li').each(function (index) {
          jQuery(this).hover(

                function () {
                    var _self = this;
                    clearTimeout(mouseout_tid[index]);
                    mouseover_tid[index] = setTimeout(function () {
                        jQuery(_self).find('ul:eq(0)').fadeIn(200);
                    }, 400);
                },

                function () {
                    var _self = this;
                    clearTimeout(mouseover_tid[index]);
                    mouseout_tid[index] = setTimeout(function () {
                        jQuery(_self).find('ul:eq(0)').fadeOut(200);
                    }, 400);
                }

            );
      });
  });   
</script>

both the script blocs are same except

jQuery('.menus > li >)

and

jQuery('.menus > li > .children > li')

How can I combine both these blocks of code. please suggest

Answer 1

The selectors work the same as in CSS, so all you need is to separate them with a coma:

jQuery('.menus > li, .menus > li > .children > li')