addClass только для определенного элемента без определенного класса или ID

Question

Как идут на bros?

У меня есть код, который нужно добавить класс к элементу, когда пользователь прокручивает страницу на позицию элемента и я использую этот код:

$(window).on('scroll',function(){ 
    Scroll = $(this).scrollTop(); 
     if(Scroll >= $('img').position().top) 
     $('img').addClass('rotate'); 
    }); 

И мой HTML-код это:

<div class="some-class"> 
    <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size"> 
</div> 

<div class="some-class"> 
    <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size"> 
</div> 

<div class="some-class"> 
    <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size"> 
</div> 

Теперь, когда я запускаю код, класс rotate применяется ко всем тегам img. но я хочу добавить класс rotate только к элементу, у которого есть условия, которые я сказал в своем предложении js if!

Что теперь делать? вы также можете увидеть jsfiddle!

Answer 1

Loop в все img и использовать $(this) добавить класс

$(window).on('scroll',function(){ 
    Scroll = $(this).scrollTop(); 
    $('img').each(function(){ 
    if(Scroll >= $(this).position().top) 
     $(this).addClass('rotate'); 


     }); 

}); 

Answer 2

Вы можете использовать JQuery-х filter получить только теги изображений, который соответствует вашим требованиям, например:

Scroll = $(this).scrollTop(); 
$('img').filter(function(index, el) { 
    return Scroll >= el.position.top(); 
}).addClass('rotate'); 

Answer 3

заменить ваш, если с этим

$('img').each(function(index) { 
if(Scroll >= $(this).position().top) 
    $(this).addClass('rotate'); 

});

Answer 4

$(window).on('scroll', function() { 
 
    Scroll = $(this).scrollTop(); 
 
    $('img').each(function() { 
 
    if (Scroll >= $(this).position().top) 
 
     $(this).addClass('rotate'); 
 
    }) 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="some-class"> 
 
    <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size"> 
 
</div> 
 

 
<div class="some-class"> 
 
    <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size"> 
 
</div> 
 

 
<div class="some-class"> 
 
    <img src="http://blog.majidkn.com/wp-content/themes/majidkn2/images/mkn.png" class="feature-size"> 
 
</div>

Итерация по каждому изображению используйте this контекст сказать текущее изображение