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

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>