javascript - 使用 THIS 选择当前元素的特定子元素

Question

我想知道如何选择 <span ="data">来自以下内容。

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

我想使用类似的东西:onmouseover="select(this)"然后能够根据该事件访问该跨度，因为我有可能 <div class="feeds">元素。

甚至欢迎 JQuery 建议。

Answer 1

您提供的 HTML 无效。定义属性时，您必须给它们命名。假设您有这个:

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

使用 jQuery，您无需内联事件处理程序即可轻松完成此操作。在你的 $(document).ready() 你可以放:

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

$span 将保留对您的 span(在 jQuery 集合中)的访问权。

jsFiddle Demo - jQuery version

---

如果您需要一个仅使用 Javascript 的解决方案(使用您的内联事件处理程序:onmouseover="select(this)")，您将采用如下方式:

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

getElementsByClassName() 仅适用于现代浏览器，但您可以使用 fallback对于古老的 IE 也是如此。

jsFiddle Demo - Plain Javascript / Inline handler

---

注意:如果您有多个 .feeds，请考虑为 someDiv 使用类而不是 id，因为 id只能在 HTML 文档中出现一次。