Question

I would like to know how can I select <span ="data"> from the following.

<div class="feeds" onmouseover="...">
    <div id="someDiv"></div>
    <div class="moredivs"></div>
    <span ="data">data in here...</span>
</div>

I would like to use something like: onmouseover="select(this)" and then be able to access that span based on that event, because I have may <div class="feeds"> elements.

Even a JQuery suggestion is welcome.

Answer 1

The HTML you have provided is invalid. When defining attributes, you have to give them a name. Let’s assume you have this:

 <span class="data">data in here...</span>

With jQuery, you can simply do this without an inline event handler. In your $(document).ready() you could put:

$('.feeds').mouseover(function () {
    var $span=$('span.data', this);
});

$span will hold access to your span (in a jQuery collection).

jsFiddle Demo – jQuery version

---

If you need a Javascript only solution (with your inline event handler: onmouseover="select(this)"), you would go with something like this:

function select(me) {
    var span=me.getElementsByClassName('data')[0];
}

getElementsByClassName() is only available on modern browsers, but you can use a fallback as well for ancient IEs.

jsFiddle Demo – Plain Javascript / Inline handler

---

Note: If you have more than one .feeds, please consider using a class instead of an id for someDiv, because an id can only appear once in a HTML document.