web-dev-qa-db-ja.com

jquery：children（）と子セレクタ ">"

次のようなセクションを持つテーブルがあります。

<tr>
    <td> <span class="myclass"></span>
    </td>
<tr>

$（this）はtr要素に設定されており、「myclass」クラスが設定されているSpan要素にアクセスしようとしています。以下はうまくいくようです：

if ($(this).children('td').children('span').is('.myclass')){
    alert('in here');
}

しかし、これを使用しようとすると：

if ($(this).children("td > span").is('.myclass')){

またはこれ：

if ($(this).children("td span").is('.myclass')){

ありません。上記の2つの方法のいずれかで（異なる方法ではあるものの）同様の結果が得られると思いましたが、明らかにそうではありませんでした。

ここで何が欠けていますか？

ありがとう！

jqueryjquery-selectorschildren
18
user417918

children(selector)は、selectorに一致する子にのみ一致します。 trにはtdの子要素がなく、trsと_td > span_しかないため、spanの子（tds）は_td > span !== td_に一致できません。

documentation もこれについては非常に明確です。

一致した要素のセット内の各要素の子を取得します。オプションでセレクターでフィルターできます。

代わりに必要なのは .find() です。

_$(this).find("td > span")
_

セレクターに一致する、子だけでなくすべての子孫を返します。

19
Felix Kling

JQueryドキュメントから：

「.find（）メソッドと.children（）メソッドは似ていますが、後者はDOMツリーの1レベル下を移動するだけです。」

私はこれを使用することをお勧めします：

if ($(this).find('.myclass').length){
    alert('in here');
}

乾杯

1
Kevin Ennis

私はこれを説明しました ここ 。

違いは、最初のセレクターは完全にchildren呼び出し内にあるのに対し、2番目のセレクターはそうではないということです。

したがって、最初のものはthisのすべての子を探します。これはtd > spanにも一致します。 （言い換えれば、すべて{<span>s <td>sの子}（セレクタ）それ自体がthisの直接の子です）

2番目のものは、thisのすべての<td>子を検索し、それらの<span>s内のすべての<td>sを検索します。

0
SLaks