jQuery 选择器层次结构答案

【问题标题】：jQuery selectors hierarchyjQuery 选择器层次结构
【发布时间】：2014-02-20 18:28:36
【问题描述】：

考虑以下 html 结构：

<div id="test">
    <a href="http://test">
      < cufon class="cufon cufon-canvas" alt="ge" style="width: 77px; height: 14px;">
        <canvas width="89" height="15" style="width: 89px; height: 15px; top: 0px; left: -2px;"> 
        </canvas>
          <cufontext>test</cufontext>
      </cufon>
    </a>
</div>

通过 jQuery 选择器但以完全分层的方式选择 canvas 对象的最简单方法是什么？

例如。伪代码。 $("#test > a:first > .cufon cufon-canvas > canvas")

【问题讨论】：

“以完全分层的方式”是什么意思？据我了解：$("#test > a:first > .cufon > canvas")
如果您有要定位的 ID，则无需遍历整个层次结构。
我知道，但出于研究目的，我特别需要这样做

标签： javascript jquery html

【解决方案1】：

你可以使用：

$("#test > a:first > .cufon.cufon-canvas > canvas")

你需要使用.cufon.cufon-canvas来选择两个类而不是.cufon cufon-canvas

【讨论】：

我明白了，所以 cufon cufon-canvas 实际上是两个类

【解决方案2】：

你可以使用：

 $('#test canvas')[0]

$('#test canvas') 将为您提供一个 jQuery 扩展对象，而不是具有 getContext 等 See this 等成员函数的原生 DOM 元素对象。

【讨论】：

【解决方案3】：

你可以选择如下

$('#test').find('canvas');

【讨论】：