Question

这是一个更好奇的问题，而不是一个问题）

使用我的Rails 3应用程序，我生成了许多包含div元素的块。一个块看起来像这样：

<div class="link_div">
        <%= link_to ... %>
        <div class="ranking">
        <%= link_to ... %>
        <%= link_to ... %>
        <%= link_to ... %>
    </div>
</div>

现在我试图在mouseOVER上切换“排名”div可见性。它不是那么容易，因为我是jQuery的新手。我尝试了很多css访问器，但最终我找到了一个解决方案：

$('.link_div').hover(
      function () {
        $(this).children('.ranking').css('display','block');
      },
      function () {
        $(this).children('.ranking').css('display','none');
      }
);

所以问题是：“为什么这个解决方案不起作用？”：

$(this).children()[1].css('display','block');

警告说chilren（）[1]给了我div对象，但它没有.css（）方法。的为什么吗

alert($(this).children()[1]) // => "[object HTMLDivElement]"

Answer 1

Here is a demo在鼠标悬停在<div>

上时显示/隐藏排名 <div class="link_div">的一种非常简单的方法

选择器$('.ranking', this)匹配当前元素（context）中具有类.ranking的所有元素，并将show()函数应用于它们

正如其他人已经回答的那样，您的问题是您已使用[1]取消引用jQuery对象，并且您有一个原始DOM对象。在这种情况下，您需要在jQuery对象上调用函数。

Answer 2

你为什么要在javascript中这样做？这显然属于css。您将获得更清晰的代码，更好地区分标记，内容和行为以及巨大的性能提升。

<强> example

Answer 3

因为它是一个对象，而不是一个jQuery对象（因此，没有jQuery方法/属性）。

尝试$($(this).children()[1]).css('display','block');

或者，甚至更整洁，只需删除[1]：

$(this).children().css('display','block');

Answer 4

[1]给你div对象，而不是jquery对象。 .css是一个jquery方法，必须在jquery对象上使用。

请改为尝试：

$(this).children().eq(1).css('display','block');

或

$(this).children(":eq(1)").css('display','block');

甚至更好，使用show()和hide()代替设置显示。

使用jQuery更改子div样式的问题（通过类选择器）

4 个答案: