JQuery Event Listeners in a For Loop

Question

I am trying to create some basic button rollover functionality using Jquery and toggleClass. I am building a list of elements by cloning a DIV from my HTML and duplicating it multiple times (its populating a list of data from a database). To do this I am using a for loop. Here is the currently working code.

            var displayNode = document.getElementById('phoneDisplayContainer');         
        for(var i=0; i<length; i++) {
            //Clone the original container display.
            var clonedDisplay = displayNode.cloneNode(true);
            clonedDisplay.setAttribute('id', 'phoneDisplayContainer' + i);
            //Remove hidden class from cloned Element. NOT CROSS BROWSER!
            clonedDisplay.classList.remove('hidden');

            var children = clonedDisplay.getElementsByTagName('div');
            //Fill new nodes children containers with data.
            children[1].innerHTML = contact.phone[i].type;
            children[2].innerHTML = contact.phone[i].number;
            children[3].setAttribute('onclick', 'PhoneUtility.edit(' + i + ');');
            children[3].setAttribute('id', 'phoneEditDisplay' + i);
            children[4].setAttribute('onclick', 'PhoneUtility.remove(' + i + ');');

            //Hidden elements
            var hidden = new Array(children[3], children[4]);

            //Set rollover events.
            clonedDisplay.setAttribute('onmouseover', '$("#' + children[3].id + '").toggleClass("hidden");');
            clonedDisplay.setAttribute('onmouseout', '$("#' + children[3].id + '").toggleClass("hidden");');

            //Append the new node to the display container
            phoneContainer.appendChild(clonedDisplay);
        }
    }

Is there a way to use Jquery event listeners instead of having to set onmouseover and onmouseout directly on the element?

I tried this:

$(clonedDisplay).mouseover(function() {
    $(children[3]).toggleClass('hidden');
});

With no luck. It just displays performs the rollover effect on the last element in the list. This is actually my first attempt at using jQuery so any other suggestions to ways I could jQuery inside the code would be helpful too.

EDIT: I'd also like to toggle multiple children from the arraylist mentioned in the for loop. How would I set this up? I can't seem to pass an array to the jquery command without getting errors.

Could you post this on jsfiddle.net with the html you're manipulating? I can take a look at your working example and show you how to turn it into some brief jQuery if you'd like. — JesseBuesking
– JesseBuesking, Commented Dec 19, 2011 at 4:24
I'm with JesseB -- most of us who know jQuery know that you can do what you want to do with the .on() event-binding utility, but there's not enough information to give a real answer. I wrote one that used a bunch of assumptions and guesses, and then said "meh, better to know the real scenario". Suffice it to say, .on() (for jQuery 1.7+) is what you're looking for. — Greg Pettit
– Greg Pettit, Commented Dec 19, 2011 at 4:26

nnnnnn · Accepted Answer · 2011-12-19 04:40:32Z

2

The following code after your for loop should let you assign all the mouseover and mouseout handlers in one go to apply to all the clones:

$('div[id^="phoneDisplayContainer"]').mouseover(function() {
   $(this).find("div").eq(3).toggleClass("hidden");
}).mouseout(function() {
   $(this).find("div").eq(3).toggleClass("hidden");
});

// or, given that both handlers do the same thing:
$('div[id^="phoneDisplayContainer"]').on("mouseover mouseout", function() {
   $(this).find("div").eq(3).toggleClass("hidden");
})

(If you're using jQuery older than 1.7 use .bind() instead of .on().)

The above says to find all the divs with an id beginning with "phoneDisplayContainer" and assign event handlers. Within the handler, find the fourth descendant div and toggle the class.

You don't show your HTML or CSS, but you could do this all in your CSS if you like. Assuming you can assign a common class ("parentDiv") to the divs that you want to trap the hover event on, and a common class ("childDiv") to their child div (the one to be hidden), you can do this:

.parentDiv .childDiv { visibility: hidden; }
.parentDiv:hover .childDiv { visibility: visible; }

(Obviously you can give more meaningful class names to fit your structure.)

Otherwise, again if you can assign those classes to the appropriate divs then after your loop you can do this with jQuery:

$(".parentDiv").on("mouseover mouseout", function() {
   $(this).find(".childDiv").toggleClass('hidden');
});

Basically the same as what I said initially, but using classes for selectors. If you feel like I'm pushing a class-based solution on you that's because I am: it tends to make this sort of thing much easier.

edited Dec 19, 2011 at 4:40

answered Dec 19, 2011 at 4:31

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

3 Comments

ryandlf Over a year ago

The CSS solution makes a lot more sense. I feel a little silly trying to attack the problem with a much more complex solution. Thanks. For the sake of my original question though, your code is so close. How would I toggle the hidden class on multiple child elements?

ryandlf Over a year ago

Thinking about it, the css approach does not work because I have the hidden class places on children within a container div. Hovering over the container div can only affect its own class, not of its children.

nnnnnn Over a year ago

The CSS approach works fine to hide and show children of a containing div when you hover over the container. Have a look at this simple demo: jsfiddle.net/pYeJc (you'll notice there's no JS). The CSS containerSelector:hover childSelector { } applies settings to any element matching the childSelector that is a descendent of an element matching the containerSelecdtor that you are currently hovering over. (Note: if you're using IE you need at least version 7. Other browsers should be fine.)

Collectives™ on Stack Overflow

JQuery Event Listeners in a For Loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related