CODEWITHSUNDEEP
javascriptjquery
DavidB
DavidB

Reputation: 2596

Cannot find element based on attribute

I am trying to raise a mouseenter event for an element, when hovering over another element. I am trying to find the element based on a data attribute:

 $("#modal").on("mouseenter", ".jq_pin", function(e) {
        var attr = $(this).data("abbr");
        var els = $(".jq_mapPoint");
        var el = els.find("[data-abbr='" + attr  + "']");
        el.trigger(e.type);
    });

My event fires, and debugging I can see a list of elements with jq_mapPoint class, and one has a matching data attribute, but the length of el is always 0.

Element with event:

<li class="jq_pin"data-abbr="N">HI</li>

Element Im trying to target:

<div style="position:absolute;left:59%;bottom:72%" class="jq_mapPoint" data-abbr="N">N</div>

Upvotes: 0

Views: 66

Answers (2)

Martin Staufcik
Martin Staufcik

Reputation: 9482

It probably needs the All selector *:

theels.find("*[data-abbr='" + attr  + "']");

Upvotes: -1

Satpal
Satpal

Reputation: 133433

You need .filter() instead of .find()

Reduce the set of matched elements to those that match the selector or pass the function's test.

var el = els.filter("[data-abbr='" + attr  + "']");

instead of

var el = els.find("[data-abbr='" + attr  + "']");

Upvotes: 4

Related Questions