jquery选择器获取带有div内部类的元素

Question

我正在处理jquery选择器。 我有一部分html（简化）看起来像

<div class="tile">            
      message
      <a href="#" class="ui-icon ui-icon-pencil">link1</a>
      <a href="#" class="ui-icon ui-icon-close">linkb</a>    
</div>

这个div在页面中重复了一次

并且在相对javascript中我想添加代码以在用户将鼠标移到“tile”div上时显示或隐藏2个链接。 我写了像

这样的东西

$(function () {
    $(".tile").bind("mouseover", function () {
        $("this .ui-icon").show();
    });
    $(".tile").bind("mouseout", function () {
        $("this .ui-icon").hide();
    });
});

但这不起作用。 有人可以帮我吗？

Answer 1

有几个选择：

最小修复

你在选择器中使用了“this”;你想要做的是使用$(this)获取鼠标移过的实际图块的jQuery对象，然后使用find查找后代元素。您最好使用mouseenter和mouseleave而不是mouseover和mouseout：

$(function () {
    $(".tileAgenzia").bind("mouseenter", function () {
        $(this).find(".ui-icon").show();
    });
    $(".tileAgenzia").bind("mouseleave", function () {
        $(this).find(".ui-icon").hide();
    });
});

（你最好的原因是mouseover和mouseout 冒泡，因此当鼠标移过“tileAgenzia”元素的后代元素时，你我会看到那些后代的消息。）

使用CSS（如果可以）

但值得注意的是，除非你必须支持IE6和IE7（以及一些人），否则你可以完全使用CSS，不需要JavaScript：

.tileAgenzia .ui-icon {
    display: none;
}
.tileAgenzia:hover .ui-icon {
    display: inline;
}

当鼠标悬停在具有“tileAgenzia”类的元素上的任何地方时，其类别为“ui-icon”的后代元素将可见;当鼠标没有悬停在它上面时，它们就不会。

更简洁的jQuery

如果你想坚持使用JavaScript解决方案，可以使用hover函数，这是（如果你传递两个函数）只是一个挂钩mouseenter和{{1}的快捷方式}：

mouseleave

Answer 2

尝试：$( this ).find ( '.ui icon' ).show()

Answer 3

我想你可能是这个意思：

$(this).find(".ui-icon")

Answer 4

我相信你想改变：

$("this .ui-icon")

到

$(this).find(".ui-icon")

Answer 5

有几种方法可以将jQuery选择范围扩展到当前子树。这是使用.find()方法的方法。

$(function () {
    $(".tileAgenzia").bind("mouseover", function () {
        $(this).find(".ui-icon").show();
    });
    $(".tileAgenzia").bind("mouseout", function () {
        $(this).find(".ui-icon").hide();
    });
});

我可能会建议这是一个更简单的选择：

$(function () {
    $(".tileAgenzia").hover(function () {
        $(this).find(".ui-icon").toggle();
    });
});

Answer 6

字符串中的

this与变量this不同。将其包装在jQuery中并使用find。

$(function () {
    $(".tileAgenzia").bind("mouseover", function () {
        $(this).find(".ui-icon").show();
    });
    $(".tileAgenzia").bind("mouseout", function () {
        $(this).find(".ui-icon").hide();
    });
});

Answer 7

啊，“这个”不应该在撇号内。如果你加载了jQuery，我会用jQuery方式做到这一点：

$(".tile").hover(function(){
  $(this).children(".ui-icon").show();
}, function(){
  $(this).children(".ui-icon").hide();
});

Answer 8

要将选择器限制为父元素，请使用：

$(this).find(".ui-icon")

或者：

$('.ui-icon', this)

Answer 9

$(function () {
    $(".tileAgenzia").bind("mouseover", function () {
        $(this).find(".ui-icon").show();
    });
    $(".tileAgenzia").bind("mouseout", function () {
        $(this).find(".ui-icon").hide();
    });
});

Answer 10

$(function () {
    $(".tileAgenzia").bind("mouseover", function () {
        $(this).find(".ui-icon").show();
    });
    $(".tileAgenzia").bind("mouseout", function () {
         $(this).find(".ui-icon").show();
    });
});