CODEWITHSUNDEEP
javascriptjqueryxpagesjquery-traversing
Thomas Adrian
Thomas Adrian

Reputation: 3636

Traversing HTML with jQuery

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

enter image description here

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?

enter image description here

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>

Upvotes: 0

Views: 103

Answers (3)

Cagri D. Kaynar
Cagri D. Kaynar

Reputation: 348

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"));
})

})

Upvotes: 0

L. Monty
L. Monty

Reputation: 882

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.

Upvotes: 2

Giulio D.
Giulio D.

Reputation: 11

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.

Upvotes: 0

Related Questions