关于jquery的 selector Hierarchy

<div class="nights">
        <h5 class="biguns">
            <div class="num">4</div>
            Nights
        </h5>
</div>

如果我想获得4，应该如何用selector Hierarchy呢？

先来看一下

child selector

Description: Selects all direct child elements specified by "child" of elements specified by "parent".

• version added: 1.0jQuery( "parent > child" )

  parent: Any valid selector.

  child: A selector to filter the child elements.

As a CSS selector, the child combinator is supported by all modern web browsers including Safari, Firefox, Opera, Chrome, and Internet Explorer 7 and above, but notably not by Internet Explorer versions 6 and below. However, in jQuery, this selector (along with all others) works across all supported browsers, including IE6.

The child combinator (E > F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.

即

$("div.nights > h5 > div").text()

注意，>要求要选择直接的子对象，下面是不能用的

$("div.nights  > div").text()

因为div不是div.nights的直接的子对象

再来介绍另一种方法

descendant selector

Description: Selects all elements that are descendants of a given ancestor.

• version added: 1.0jQuery( "ancestor descendant" )

  ancestor: Any valid selector.

  descendant: A selector to filter the descendant elements.

A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.

注意他和child selector的区别，descendant selector可以用一个子，孙子，重孙子对象

比如下面的方法可以执行

$("div.nights  div").text()

也可以写成

$("div.nights  h5  div").text()

参考： http://api.jquery.com/descendant-selector/

http://api.jquery.com/child-selector/

http://stackoverflow.com/questions/3890458/jquery-nested-selector/3890469#3890469