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中出现一次文档。

Answer 2

工作示例 - http://jsfiddle.net/4NAJ9/1/

<script>
$(function(){
    $('.feeds').hover(function(){
        var data_span = $(this).find('.data');
        alert(data_span.html());
    }, function(){
        // If you wanted something to happen 'onmouseout', put it here
    });
});
</script>

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

如果您愿意使用jQuery，那么您真的不希望向每个onclick元素添加内联.feeds事件。

最好将Javascript与HTML分开 - jQuery允许您轻松完成此操作。

Answer 3

这样的东西？

$('.feeds').mouseover(function() {
  $('span',this).html();
});

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

3 个答案: