How to generate JQuery calls inside JavaScript FOR loop?

Question

I need to generate this 4 JQuery calls inside a Javascript Function:

$(".dropdown-menu .1_147").hover(
  function() { $("#1_147").show(); },
  function() { $("#1_147").hide(); }
);

$(".dropdown-menu .2_147").hover(
  function() { $("#2_147").show(); },
  function() { $("#2_147").hide(); }
);

$(".dropdown-menu .3_147").hover(
  function() { $("#3_147").show(); },
  function() { $("#3_147").hide(); }
);

$(".dropdown-menu .4_147").hover(
  function() { $("#4_147").show(); },
  function() { $("#4_147").hide(); }
);

I've write a Javascript function, the FOR loop only generates the last interaction "4_147". How can I tell the Javascript to generate the 4 JQuery calls?

My current JavaScript:

var submenu_navigation = document.getElementsByClassName("dropdown-menu");
var submenu_navigation_list = submenu_navigation[0].getElementsByTagName('li');

/*console.log(submenu_navigation_list);*/

function generateDropdownMenuMoldura(lis_array) {

    for (var item in lis_array) {

        var item_class_attr_name = lis_array[item].getAttribute('class');

        console.log(item_class_attr_name);

        $(".dropdown-menu ." + item_class_attr_name).hover(
          function() { $("#" + item_class_attr_name).show(); },
          function() { $("#" + item_class_attr_name).hide(); }
        );


    }   
}


generateDropdownMenuMoldura(submenu_navigation_list);

Any clues?

Best Regards,

Update:

I got the solution:

/* Define the Elements that I need to loop */
var submenu_navigation = document.getElementsByClassName("dropdown-menu");
var submenu_navigation_list = submenu_navigation[0].getElementsByTagName('li');


function generateDropdownMenuMoldura(lis_array) {

    for (var item in lis_array) {

        var item_class_attr_name = lis_array[item].getAttribute('class');

        console.log(item_class_attr_name);

        (function(item_class_attr_name) {
            $(".dropdown-menu ." + item_class_attr_name).hover(
              function() { $("#" + item_class_attr_name).show(); },
              function() { $("#" + item_class_attr_name).hide(); }
            );
        })(item_class_attr_name);


    }   
}


generateDropdownMenuMoldura(submenu_navigation_list);

My question is: How this anonymous function call works? This is a recursion technique?

Best Regards,

possible duplicate of Javascript assigning event handlers via for loop — Quentin
– Quentin, Commented Aug 9, 2012 at 12:23
here var item_class_attr_name = lis_array[item].getAttribute('class'); you are getting class but later you are using id selector. — Om3ga
– Om3ga, Commented Aug 9, 2012 at 12:25
Have you checked if the loop is really giving you the 4 classes? — Nuxy
– Nuxy, Commented Aug 9, 2012 at 12:26
This may not look like a duplicate of that other question, but it's the same basic issue, and it comes up all the time. In addition to that, you should not use a for ... in loop for the iteration; instead use a numeric index variable: for (var i = 0; i < lis_array.length; ++i) { ... } — Pointy
– Pointy, Commented Aug 9, 2012 at 12:26
@Quentin, I got it working with your link. I've posted the UPDATE. This technique is called recursively call an anonymous function? Best Regards, — André
– André, Commented Aug 9, 2012 at 12:37

Community · Accepted Answer · 2017-05-23 11:43:56Z

0

How to fix your specific solution was already answered in an other question.

But why so complicated? Judging from the JavaScript you currently have, and assuming everything apart from the scope works fine, a simpler solution would be:

$(".dropdown-menu li").hover(function() { 
    $('#' + this.className).show(); 
}, function() { 
    $('#' + this.className).hide();
});

There is no need to bind a different handler to each of these elements, since they all do basically the same thing.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Aug 9, 2012 at 12:42

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jbabey Over a year ago

wouldn't this select on ids like #dropdown-menu 1_147 someOtherClass? you'd need a way to isolate the 1_147.

Felix Kling Over a year ago

If you have a look at the first two lines of the OP's solution, you see that he is calling getElementsByTagName('li'). I just converted this directly to jQuery. If that is selecting the right elements for him, then this will too. Of course it would be easier to suggest a solution if we'd know the markup.

jbabey Over a year ago

right, im saying that the li elements may have other classes on them, you can't just take the entire className attribute as the ID.

Felix Kling Over a year ago

Ah ok, understood. But that's what he is doing as well: var item_class_attr_name = lis_array[item].getAttribute('class');.

jbabey Over a year ago

true, i didn't notice that. this issue exists in his solution as well then :P

|

Michel Ayres · Accepted Answer · 2014-06-04 13:30:44Z

0

Take a look at jQuery.each('dropdown-menu') method . It is for loops.

HTML Sample

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

jQuery Sample

$( "li" ).each(function( index ) {
  console.log( index + ": " + $( this ).text() );
});

edited Jun 4, 2014 at 13:30

Michel Ayres

6,02511 gold badges67 silver badges97 bronze badges

answered Aug 9, 2012 at 12:36

user1485518

2293 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to generate JQuery calls inside JavaScript FOR loop?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related