CODEWITHSUNDEEP
javascriptjqueryhtml
Michael Mahony
Michael Mahony

Reputation: 1350

How to make my JQuery code work properly for multiple ID's

I have the following code to show and hide menu items on hover:

jQuery( "#menu-item-11215" ).hover(
    function() {
        jQuery('#menu-item-11215 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11215 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11233" ).hover(
    function() {
        jQuery('#menu-item-11233 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11233 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11211" ).hover(
    function() {
        jQuery('#menu-item-11211 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11211 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11268" ).hover(
    function() {
        jQuery('#menu-item-11268 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11268 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11243" ).hover(
    function() {
        jQuery('#menu-item-11243 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11243 .sub-menu').hide();
    }
);

jQuery( "#menu-item-11239" ).hover(
    function() {
        jQuery('#menu-item-11239 .sub-menu').show();
    },
    function() {
        jQuery('#menu-item-11239 .sub-menu').hide();
    }
);

Rather than repeat the same code over and over, is there a way to trigger the JQuery to work for any of the IDs that have a child ? Here is the relevant HTML code for just one of these. They are all set up the same way:

<ul class="fusion-megamenu fusion-megamenu-row-2 fusion-megamenu-row-columns-1 fusion-megamenu-border">
    <li id="menu-item-11215" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-11215 fusion-megamenu-submenu fusion-megamenu-columns-1 col-lg-12 col-md-12 col-sm-12">
        <h3 class='fusion-megamenu-title'>
            <a href="http://someurl">Families &#038; Individuals</a>
        </h3>

        <ul class="sub-menu">
            <li id="menu-item-11275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11275">
                <a href="http://someurl">
                    <span class="fusion-megamenu-bullet"></span>Tax &#038; Advisory
                </a>
            </li>
            <li id="menu-item-11277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11277">
                <a href="http://someurl">
                    <span class="fusion-megamenu-bullet"></span>Trust &#038; Estates
                </a>
            </li>
        </ul>
    </li>
</ul>

Knowing that the parent of each child has an ID and I can select the child to show and hide using this code:

jQuery('#menu-item-11211 .sub-menu')

How can I make this more generic to save lines of code?

Upvotes: 0

Views: 123

Answers (5)

abl
abl

Reputation: 5958

There are many ways to refactor this code in order to reduce duplication. Most of them have nothing to do with jQuery but with the JavaScript langauge itself. For example:

var itemNumbers = [
    "11215",
    "11233",
    "11211",
    "11268",
    "11243",
    "11239"
];

for(var i=0; i<itemNumbers.length; i++){
    var menuItem = jQuery("#menu-item-" + itemNumbers[i]);
    var subMenu = menuItem.find(".sub-menu");
    menuItem.hover(subMenu.show, subMenu.hide);
}

or: 

var itemNumbers = [
    "11215",
    "11233",
    "11211",
    "11268",
    "11243",
    "11239"
];

var menuItems = $();
for(var i=0; i<itemNumbers.length; i++){
    menuItems = menuItems.add("#menu-item-" + itemNumbers[i]);
}

menuItems.hover(
    function(){
        $(this).find(".sub-menu").show();
    },
    function(){
        $(this).find(".sub-menu").hide();
    }
});

Upvotes: 0

wnbates
wnbates

Reputation: 753

If you really need to find each element based on the id's then put them in a comma separated string like below

menuitems = "#menu-item-11215, #menu-item-11233";
jQuery( menuitems ).hover(
          function(){
              $(this).children(".sub-menu").show();
          },
          function(){
              $(this).children(".sub-menu").hide();
          }
        );

I've used .children because it should be faster than .find, but it will only search the immediate children of your menu-items and won't go any deeper.

Upvotes: 1

Flash Thunder
Flash Thunder

Reputation: 12036

Use this selector: $('[id^="menu-item"]') to act on every item that has ID starting with menu-item.

In your function it would be $('.sub-menu',this)

jQuery('[id^="menu-item"]').hover(
    function() {
        jQuery('.sub-menu',this).show(); // <--- this selects .sub-menu with parent of menu-item it is reffering to.
    },
    function() {
        jQuery('.sub-menu',this).hide();
    }
);

Upvotes: 1

Patrick W. McMahon
Patrick W. McMahon

Reputation: 3561

then just pass-in the elements in elm and what set would be show or hide 

   function MyToggle(elm,set){
      if(set=="show"){
        $(elm+' .sub-menu').show();
      }else{//hide
        $(elm+' .sub-menu').hide();
      }
    }

Upvotes: -1

j08691
j08691

Reputation: 207861

Reduce everything you have to:

jQuery( "ul.fusion-megamenu > li" ).hover(
    function(){
        jQuery(this).find('ul.sub-menu').show();
    },
    function(){
        jQuery(this).find('ul.sub-menu').hide();
    }
);

By using jQuery(this).find() you only search the list relative to the list you hover over.

Upvotes: 5

Related Questions