Traversing HTML with jQuery

Question

I am trying to traverse html using jQuery .

You can see the html code in the image. when I hover the mouse over a star the code is triggered

the code finds the span two levels up using parent().parent(). and then gets all the fa-star elements using jquery "find" method. when I loop the code I expect the loop to print 5 items. but it prints about 24 of them.

what can be the cause of this behaviour?

This is the javascript code I use,

$(".fa-star").bind("mouseover", function(e){
    var star_elements = $(this).parent().parent()
    star_elements.find(".fa-star").each(function(i,elem) {
        console.log(i + $(elem).attr("class"));
    })
})

  <span id="view:_id1:_id338:_id343:repeat2:0:stars">
<span id="view:_id1:_id338:_id343:repeat2:0:_id442:inlineaction" class="kompetensdlg" style="background-color: red;">
    <a id="view:_id1:_id338:_id343:repeat2:0:_id442:link5" href="#" title="Grund"><i id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField1" class="fa fa-star yellowstar"></i></a><a id="view:_id1:_id338:_id343:repeat2:0:_id442:link10" href="#" title="God"><i id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField2" class="fa fa-star yellowstar"></i></a><a id="view:_id1:_id338:_id343:repeat2:0:_id442:link4" href="#" title="Utmärkt"><i id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField3" class="fa fa-star yellowstar"></i></a><a id="view:_id1:_id338:_id343:repeat2:0:_id442:link6" href="#" title="Avancerad"><i id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField4" class="fa fa-star yellowstar"></i></a><a id="view:_id1:_id338:_id343:repeat2:0:_id442:link7" href="#" title="Expert"><i id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField5" class="fa fa-star yellowstar"></i></a><span id="view:_id1:_id338:_id343:repeat2:0:_id442:computedField6" class="kmsg"></span></span>
    </span>

Maybe mouseover event is triggered more than one, try to add some delay after first. — Cagri D. Kaynar, May 16 '21 at 14:12
yes, I can see that it is triggered many times, but why? I only enter a star once — Thomas Adrian, May 16 '21 at 14:25
If I understand correctly you expect the JS code to output all of the stars in the row the user has hovered over? Is that correct? Would you mind adding the HTML so I can recreate and solve the issue too. — thursday_dan, May 16 '21 at 14:28
Because when it enters onece stays over it, you should try mouseenter instade of mouseover — Cagri D. Kaynar, May 16 '21 at 14:31

L. Monty · Accepted Answer · 2021-05-16T14:44:08.507

As you see there are only 5 indices used. They occur multiple times in your log. It seems like your mouseover-handler is triggered multiple times. You will also be able to verify this by adding a log to your mouseover-handler outside of the loop.

Make sure, that the plugin that you are using (or your code) is not triggering mouseover internally and that the hovered elements have the size that you are expecting. Of course also make sure your handler is not bound multiple times.

EDIT:

The code that you provided seems to work perfectly for me (even though there is a semicolon missing). Take a look at this fiddle. Do you expect a different behavior?

(I can only provide a fiddle with code in the answer, so here is your code again with added semicolon. As stated it seems to work properly)

$(".fa-star").bind("mouseover", function(e){
    var star_elements = $(this).parent().parent();
    star_elements.find(".fa-star").each(function(i,elem) {
        console.log(i + $(elem).attr("class"));
    })
});

EDIT:

It looks to me like you are using JSF. Might it be, that your script is updated multiple times by ajax and so the handler gets bound multiple times?

Consider logging immediatly before the handler is bound to make sure that this is not the case.

yes, you seem to be right , thanks for pointing me to fiddle, I will try some more there — Thomas Adrian, May 16 '21 at 14:43
See the update in my answer. I still think that the handler is bound multiple times... — L. Monty, May 16 '21 at 14:45
yes, you are correct, I did also bind mouseover within the repeat because of ajax requests. I guess I need to unbind before doing that, many thanks — Thomas Adrian, May 16 '21 at 14:52

score 0 · Answer 2 · answered May 16 '21 at 14:34

0

Consider that the code is triggered for each mouseover on each of the i.fa-star elements. So if your mouse simply gets over one star and then over another star you'll get 10 logs. If you move the mouse around you'll get thousands.

answered May 16 '21 at 14:34

Giulio D.

11
1

I just enter one star once and it still outputs many more than expected – Thomas Adrian May 16 '21 at 14:37
Can you show the code surrounding that jquery code? Maybe your binding is triggered more than once? – Giulio D. May 16 '21 at 14:45

score 0 · Answer 3 · edited May 18 '21 at 09:44

0

Maybe mouseover event is triggered more than one, try to add some delay after first.

$(".fa-star").bind("mouseenter", function(e){
var star_elements = $(this).parent().parent()
star_elements.find(".fa-star").each(function(i,elem) {
    console.log(i + $(elem).attr("class"));
})

})

edited May 18 '21 at 09:44

B001ᛦ

2,036
6
23
31

answered May 16 '21 at 14:36

Cagri D. Kaynar

348
1
10

I get the same result – Thomas Adrian May 16 '21 at 14:37
Please explain your solution, also for future visitors of StackOverflow. – B001ᛦ May 16 '21 at 22:02
I did it on question comments – Cagri D. Kaynar May 17 '21 at 14:25
Well the explanation of the "answer" has to be withhin the "answer". its a cohesive thing. If you feel lazy to do so, I'll do it for you. – B001ᛦ May 18 '21 at 09:43

Traversing HTML with jQuery

3 Answers3