javascript - 通过父元素 ID 和子类向子元素添加类

Question

我想我弄错了“$('#groupdepID01 > .lahatkami')” $('ID > 类')

脚本

 $('#groupdepID01 > .lahatkami').addClass('iamSelected');

html

<div id="groupdepID01">
     <input class="lahatkami" id="01" />
</div>

<div id="groupdepID02">
     <input class="lahatkami" id="02" />
</div>

<div id="groupdepID04">
     <input class="lahatkami" id="03" />
</div>

预期输出应该是

<div id="groupdepID01">
     <input class="lahatkami iamSelected" id="01" />
</div>

<div id="groupdepID02">
     <input class="lahatkami" id="02" />
</div>

<div id="groupdepID03">
     <input class="lahatkami" id="03" />
</div>

Answer 1

您的代码正在运行。

我怀疑你没有包含jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在你的项目中..

运行代码并检查后Developer tools或按F12

iamSelected类添加到id="groupdepID01"内

现场演示 Here

下面的代码片段示例

$('#groupdepID01 > .lahatkami').addClass('iamSelected');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="groupdepID01">
     <input class="lahatkami" id="01" />
</div>

<div id="groupdepID02">
     <input class="lahatkami" id="02" />
</div>

<div id="groupdepID04">
     <input class="lahatkami" id="03" />
</div>

出于测试目的添加 CSS iamSelected

$('#groupdepID01 > .lahatkami').addClass('iamSelected');

.iamSelected
{
 background-color:blue;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="groupdepID01">
     <input class="lahatkami" id="01" />
</div>

<div id="groupdepID02">
     <input class="lahatkami" id="02" />
</div>

<div id="groupdepID04">
     <input class="lahatkami" id="03" />
</div>

使用 jquery-3.1.1.min.js

$('#groupdepID01 > .lahatkami').addClass('iamSelected');

.iamSelected
{
  background-color:blue;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="groupdepID01">
     <input class="lahatkami" id="01" />
</div>

<div id="groupdepID02">
     <input class="lahatkami" id="02" />
</div>

<div id="groupdepID04">
     <input class="lahatkami" id="03" />
</div>