Question

单击title应该更改具有target类的下一个div的css。

$('.title').on('click', function(){
    $(this).next('.target').css('background', 'gold');
});

.title{cursor:pointer;}
.target{background:lightgreen;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='title'>TITLE</div>
<br>
<div class='target'>targ</div>

<div class='title'>TITLE</div>
<input type='text'>
<div class='target'>targ</div>

<div class='title'>TITLE</div>
<div class='subtitle'>sub</div>
<div class='target'>targ</div>

Answer 1

您应该使用$(this).next().next('.target')。因为

$(this).next()是<br>标记

因此$(this).next().next('.target')将为您提供：
<div class='target'>targ</div>

尝试以下代码，它应该可以正常工作。

$('.title').on('click', function(){
    $(this).next().next('.target').css('background', 'gold');
});

.title{cursor:pointer;}
.target{background:lightgreen;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='title'>TITLE</div>
<br>
<div class='target'>targ</div>

<div class='title'>TITLE</div>
<input type='text'>
<div class='target'>targ</div>

<div class='title'>TITLE</div>
<div class='subtitle'>sub</div>
<div class='target'>targ</div>

Answer 2

根据.next()

的文档

获取匹配的元素集中紧随其后的每个元素。如果提供了选择器，则只有与该选择器匹配时，它才会检索下一个同级。

因此，在您的情况下，紧随其后的兄弟是<br>，它没有类.target。因此，您没有看到点击的任何效果，因为没有应用金色背景色。但是您可以将代码编写为：

$(document).on("click", ".title", function(e) {
  $(e.target)
    .find("~ .target:first")
    .css("background", "gold");
});

.title {
  cursor: pointer;
}

.target {
  background: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title' data-id="1">TITLE</div>
<br>
<div class='target'>targ</div>

<div class='title' data-id="122">TITLE</div>
<input type='text'>
<div class='target'>targ</div>

<div class='title' data-id="11">TITLE</div>
<div class='subtitle'>sub</div>
<div class='target'>targ</div>

Answer 3

使用nextAll()更聪明，代码更少。

$('.title').on('click', function() {
  $(this).nextAll('.target').first().css('background', 'gold');
});

.title {
  cursor: pointer;
}

.target {
  background: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title' data-id="1">TITLE</div>
<br>
<div class='target'>targ</div>

<div class='title' data-id="122">TITLE</div>
<input type='text'>
<div class='target'>targ</div>

<div class='title' data-id="11">TITLE</div>
<div class='subtitle'>sub</div>
<div class='target'>targ</div>

更改具有类的下一个div的CSS

3 个答案: