スクロールの色を変更する

Question

imgとタイトル（h3）にクラスを追加して色を変更しようとしています。 .test-shadowにクラスを追加しようとしていますが、h3は動作していません。 .closest/.findに変化する兄弟を試してみましたが、どちらもうまくいきません。アイデア？

\t   /* highlight border of winner */ 
 
     $('.img-winner').each(function(i){ 
 
      
 
      var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 
      
 
      /* If the object is completely visible in the window, animate border or box shadow */ 
 
      if(bottom_of_window > bottom_of_object){ 
 
       
 
\t \t \t $(this).siblings('.test-shadow:first').addClass('greenit'); 
 
\t \t \t $(this).siblings('h3.test-who-us:first').addClass('green'); 
 
        
 
      } 
 
      
 
     });

<ul class="2-column center test-images"> 
 
<li> 
 
<h3 class="test-who-us">Medsite Medical</h3> 
 
<div class="test-img"> 
 
<img class="img-winner" src="/wp-content/uploads/2016/07/test-desktop-us.png" alt="test-desktop"> 
 
<div class="test-shadow"></div> 
 
</div> 
 
</li> 
 
<li> 
 
<h3 class="test-who-them">Top competitor</h3> 
 
<div class="test-img"> 
 
<img class="img-loser" src="/wp-content/uploads/2016/07/test-desktop-them.png" alt="test-desktop-competitors"> 
 
<div class="test-shadow"></div> 
 
</div> 
 
</li> 
 
</ul>

Answer 1

<h3は.img-winnerの親の兄弟です。

ので、各ループの必要はありません$(this).parent().siblings('h3.test-who-us:first')

/* highlight border of winner */ 
 
$('.img-winner').each(function(i) { 
 

 
    var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
 
    var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 

 
    /* If the object is completely visible in the window, animate border or box shadow */ 
 
    if (bottom_of_window > bottom_of_object) { 
 

 
    $(this).siblings('.test-shadow:first').addClass('greenit'); 
 
    $(this).parent().siblings('h3.test-who-us:first').addClass('green'); 
 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="2-column center test-images"> 
 
    <li> 
 
    <h3 class="test-who-us">Medsite Medical</h3> 
 
    <div class="test-img"> 
 
     <img class="img-winner" src="/wp-content/uploads/2016/07/test-desktop-us.png" alt="test-desktop"> 
 
     <div class="test-shadow"></div> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <h3 class="test-who-them">Top competitor</h3> 
 
    <div class="test-img"> 
 
     <img class="img-loser" src="/wp-content/uploads/2016/07/test-desktop-them.png" alt="test-desktop-competitors"> 
 
     <div class="test-shadow"></div> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 2

で$(this).siblings('h3.test-who-us:first')を交換してください。 jQueryセレクタは、すでに適用されているすべての要素をHTMLでループします。また、スクロールイベントでモニタを作成する必要はありません。 img-winnerクラスの要素が既にドキュメントにありますが、ページにない場合は、HTMLにスタイルを追加したり、クラスを追加する方が効率的です。レンダリング後に変更すると、しばしばリフローが発生します。 Prevent Browser Reflow

しかし、これはHTMLコードに基づいて、あなたが望むものを達成する方法です。

var $winnerElem = $('.img-winner'); // cache the winner element 

// add classes 
$winnerElem.addClass('greenit'); 
$winnerElem.parent().siblings().addClass('green');