javascript - hasClass が私の js コードで動作しませんか?

Question

次のコードで使用したいのですhasClassが、うまくいきません。jsfiddle で私のデモを見て、何が間違っているのか教えてください。

<span>
    <input type="text" name="relation" class="IdRelation">
</span>


if ($('span').hasClass('IdRelation')) {
  alert("ok");
}

score 11 · Accepted Answer

<span>クラスを公開するのは要素ではなく、IdRelationその<input>子です。試す：

if ($("span input").hasClass("IdRelation")) {
    alert("ok");
}

または、実際のマークアップに応じて:

if ($("span > input").hasClass("IdRelation")) {
    alert("ok");
}

最初のコードスニペットのセレクターは、要素の子孫であるすべての<input>要素に一致しますが、2 番目のコードスニペットのセレクターは、要素の直接の子であるすべての要素に一致します。どちらもサンプルマークアップの要素と一致します。<span><input><span><input>

score 4 · Accepted Answer

解決

クラスは<span>子である<input>にあるため、jQuery セレクターに追加します$('span input')。

if ($('span input').hasClass('IdRelation')) {
  alert('ok');
}

デモをお試しください。

jQueryのドキュメントによる$('span input')と、子孫セレクターです：

特定の祖先の子孫であるすべての要素を選択します。

を使用することもできます$('span > input')。それは子セレクターです:

「親」で指定された要素の「子」で指定されたすべての直接の子要素を選択します。

inputはの直接の子であるため、どちらもあなたの状況に適しています<span>。

コードが次の場合:

<div>
    <form>
        <input type="text" name="relation" class="IdRelation">
    </form>
</div>

解は$('div input')またはになります$('div > form > input')。