hasClass在我的js代碼中不起作用？

Question

我想在以下代碼中使用hasClass ，但這對我不起作用，請在jsfiddle中查看我的演示並告訴我，我該怎么做？

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


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

Answer 1

公開IdRelation類的不是<span>元素，而是它的<input>子元素。 嘗試：

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

或者，可能取決於您的實際標記：

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

第一個代碼段中的選擇器將匹配作為<span>元素后代的所有<input>元素，而第二個代碼段中的選擇器將匹配作為<span>元素的直接子代的所有<input>元素。 兩者都將與示例標記中的<input>元素匹配。

Answer 2

解

該類位於<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') 。