他のdivの子をjQueryでどのように選択できますか？

Question

いくつかの要素をチェックしたときに以前の ".pt"をすべて選択したいとします。

私は2番目のdivで

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

を試してみました、それだけで第二のdivの前の ".pt" に変更しました。
2番目の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>