在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>

- Snowcat Jung

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>

- DaniP

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>

- Gleb Kemarsky