Question

I have code to create a single Google+ circle. But when I created multiple circles using a for loop in JSTL (JSP) (ArrayList), all circles hover at once. I need circle effect on each circle when I place the mouse on it. I’m using jQuery for the effects. The following is the code:

JSP
ArrayList

  <c:forEach items="${groups}" var="groups">
          <div id="circle">
        <div class="outer"> </div>
        <div class="middle"></div>`enter code here`
        <div class="inner"><c:out value="${groups.name}"/></div>
    </div>

 </c:forEach>

for different id <c:out value="${groups.id}"/>

jQuery

$(function() {

    $('#circle').mouseover(function() {

        $('div.outer').addClass('hover');
        $('div.middle').addClass('hover');
    });


    $('#circle').mouseout(function() {
        $('div.outer').removeClass('hover');
        $('div.middle').removeClass('hover');
    });

});

Please help me out in creating multiple circles.

Answer 1

First, you’re using a unique id attribute to identify more than one circle. This is incorrect. When using id attributes, each id must be unique. Use a class instead when grouping similar elements.

With that said, after careful review, this is not actually causing your specific problem here; however, if not corrected, it could manifest as a different problem later on in the future.

Actually, the problem is caused by your addClass and removeClass selectors.

When you add and remove the hover classes, you are doing this on all of the DIV’s with class outer and class inner. Use the jQuery find method to target only the specific DIV’s in the context of your circle:

$(function() {

    $('.circle').mouseover(function() {

        $(this).find('div.outer').addClass('hover');
        $(this).find('div.middle').addClass('hover');
    });


    $('.circle').mouseout(function() {
        $(this).find('div.outer').removeClass('hover');
        $(this).find('div.middle').removeClass('hover');
    });

});

I also changed your selector to use a class.

<c:forEach items="${groups}" var="groups">
      <div class="circle">