The problem with changing the style of a child div using jQuery (via the class selector)

this is a more interesting question, not a problem)

In my Rails 3 application, I generate many blocks containing div elements. One block is as follows:

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

And now I'm trying to switch the "ranking" of div visibility to mouseOVER. It wasn’t that simple because I am new to jQuery. I tried to use a lot of css accessories, but in the end I found a solution this way:

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

So the question is: “Why does this solution not work?”:

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

Alert says that chilren () [1] gives me a div object, but it does not have a .css () method. Why?

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