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

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>