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>元素的所有后代<span>元素，而第二个代码片段中的选择器将匹配一个元素的所有直接<input>子元素<span>。两者都将匹配<input>示例标记中的元素。

score 4 · Accepted Answer

解决方案

该类在<span>子类 an上<input>，因此将其添加到 jQuery 选择器 :$('span input')中。

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

试试演示。

根据 jQuery 文档，$('span input')是一个后代选择器：

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

你也可以使用$('span > input'). 它是一个子选择器：

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

两者都适合您的情况，因为input是<span>.

如果您的代码是：

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

解决方案将是$('div input')or $('div > form > input')。