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

Question

我想在以下代码中使用hasClass，但这对我不起作用，请在jsfiddle中查看我的演示并告诉我，我做错了什么？

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

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

DEMO

Answer 1

不是<span>元素公开IdRelation类，而是<input>子元素。尝试：

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

或许，取决于您的实际加价：

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

第一个代码段中的选择器将匹配<input>元素<span>的所有<input>元素，而第二个代码段中的选择器将匹配所有<span> <input>元素的descendants元素。两者都将匹配示例标记中的{{1}}元素。

Answer 2

解决方案

该课程位于<span>子项<input>上，因此请将其添加到jQuery选择器中：$('span input')。

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

尝试Demo。

一点解释

根据jQuery文档，$('span input')是descendant selector：

  

选择作为给定祖先后代的所有元素。

您也可以使用$('span > input')。这是child selector：

  

选择由“parent”指定的元素“child”指定的所有直接子元素。

两者都适合你的情况，因为input是<span>的直接孩子。

如果你的代码是：

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

解决方案为$('div input')或$('div > form > input')。