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') 。