Question

当我检查一些元素时，我想选择之前的所有“.pt”。

我试过

$('p').mouseover(function(){
$(this).css('font-size', 'bold');
$(this).prevAll('.pt').css('font-size', 'bold');
});

在第二个div中，它只是在第二个div中改变了之前的“.pt” 即使检查了第二个div元素，我怎么能改变第一个div的“.pt”？

<div> //first
  <p class="pt p1"></p>
  <p class="pt p2"></p>
  <p class="pt p3"></p>
</div>

<div> //second
  <p class="pt p1"></p>
  <p class="pt p2"></p>
  <p class="pt p3"></p>
</div>

Answer 1

您可以尝试获取元素的index，然后使用该参数获取slice：

$('.pt').click(function() {
  $('.red').removeClass('red');
  var ti = $(this).index('.pt');
  $('.pt').slice(0, ti + 1).addClass('red');
})

.pt {
  padding: 15px;
  background: gold;
  margin: 8px;
}
.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="pt p1"></p>
  <p class="pt p2"></p>
  <p class="pt p3"></p>
</div>

<div>
  <p class="pt p1"></p>
  <p class="pt p2"></p>
  <p class="pt p3"></p>
</div>

Answer 2

$('.pt').mouseover(function() {
  $(this).css('font-weight', 'bold');
  $(this).prevAll('.pt').css('font-weight', 'bold');
  $(this).parent().prevAll().children('.pt').css('font-weight', 'bold');
});

$('.pt').mouseleave(function() {
  $('.pt').css('font-weight', 'normal');
});

<div>
  <h3>first</h3>
  <p class="pt p1">paragraph</p>
  <p class="pt p2">paragraph</p>
  <p class="pt p3">paragraph</p>
</div>

<div>
  <h3>second</h3>
  <p class="pt p1">paragraph</p>
  <p class="pt p2">paragraph</p>
  <p class="pt p3">paragraph</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何在jQuery中选择其他div的子项？

2 个答案: