Question

有多个div包含多个span，就像这样

<div class = "cw">
   <span class = "ci"></span>
   <span class = "d1"></span>
</div>

<div class = "cw">
   <span class = "ci"></span>
   <span class = "d2"></span>
</div>

我想创建一个jquery，以便我想从第一个div更改第一个span的类名。如何使用选择器更具体，以便我的jquery仅更改我的第一个span类。

条件是div类不能改变。

Answer 1

您可以使用:first / :eq(index)选择器

$('.cw:first .ci').doSomething()
$('.cw:eq(0) .ci').doSomething()

$('.cw:first .ci').addClass('red');
$('.cw:eq(1) .ci').addClass('blue');

.red {
  color: red
}

.blue {
  color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cw">
  <span class="ci">1</span>
  <span class="d1">2</span>
</div>

<div class="cw">
  <span class="ci">1</span>
  <span class="d2">2</span>
</div>

Answer 2

使用:first选择器。

如果您想更改第二个元素，请使用:nth-child(2)'

$('.cw:first').find('span:first').text('first elem');
$('.cw:first').find('span:nth-child(2)').text('second elem');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cw">
  <span class="ci"></span>
  <span class="d1"></span>
</div>

<div class="cw">
  <span class="ci"></span>
  <span class="d2"></span>
</div>

Answer 3

您可以先删除您不想要的课程：$("div:first span:first-child").removeClass("className");然后将新课程添加到同一元素中：$("div:first span:first-child").addClass("className");

Answer 4

要更改第一个范围的类，请使用:first选择器或:eq选择器：

喜欢使用第一个选择器：

$('div.cw:first').find('span:first').addClass('new_class');

或使用eq选择器

$('.cw:eq(0)').find('span:eq(0)').addClass('new_class');

Answer 5

你可以这样：

$('.cw:first').find('span:first').removeClass('ci').addClass('newClass');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1
/jquery.min.js"></script>
<div class="cw">
  <span class="ci">ci</span>
  <span class="d1">d1</span>
</div>

<div class="cw">
  <span class="ci">ci</span>
  <span class="d2">d2</span>
</div>

更改特定div中跨度的类名

5 个答案: