CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Jean Blaguin
Jean Blaguin

Reputation: 55

I can't handle to select the correct div (using Jquery)

$(document).ready(function() {
  $(".myClass").click(function () {
    $(".myClass", $(this)).first().scrollIntoView({behavior: "smooth",block: "start"});
  });
});
.myClass {
  cursor: pointer;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class=myClass>I click on this div
</div>
<div class=otherClass>Some random text
</div>
<div>
<div class=otherClass>Some random text
</div>
<div>
<div class=myClass>I want to scroll to this div
</div>

Here is my problem, i have this pattern that repeats itself several times in my page. Div having the class "otherClass" are generated dynamically in variable quantity.

<div>
    <div class=myClass>
    </div>
</div>
<div>
    <div class=otherClass>
    </div>
</div>
<div>
    <div class=otherClass>
    </div>
</div>
<div>
    <div class=myClass>
    </div>
</div>

My goal is by clicking on a "myClass" div to scroll down the window (using scrollIntoView()) to the next div with the same class.

I added a click event on each "myClass" div but i can't manage to select the next one. I tried to add a context to my selector $(".myClass", $(this)) to search only after the clicked div but it doesn't work (always returning me the current div ?).

I also tried using next() to "move" to the next div but i'm struggling with the fact that there is an unknown numbers of "otherClass" div between them.

What am i doing wrong ?

Sorry if my explanation isn't clear and thank you for your help.

Upvotes: 2

Views: 49

Answers (2)

EugenSunic
EugenSunic

Reputation: 13703

This will work no jQuery needed.

Here is the fiddle example: https://jsfiddle.net/e1xz74wj/

JS

let scrollToNext = 0;
const elements = document.querySelectorAll('.myClass');

document.getElementById('btn').addEventListener('click', () => {
  ++scrollToNext
  if (scrollToNext < elements.length) {
    elements[scrollToNext].scrollIntoView();
  }
})

Explanation:

Increment the counter after clicking on the button to scroll to the desired element (finding element by specified className).

Each time a click occurs the counter is incremented by one hence the next element is selected. When the counter reaches the max amount of found elements it doesn't increment anymore.

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

  • Up to your html structure .myClass doesn't have any next .myClass on its level .. See the next code

$('.myClass').on('click' , function(){
  $(this)
  .parent() // select the parent div
  .nextAll('div:has(.myClass)') // select the next div which has .myClass in it
  .first() // select just one div next
  .find('.myClass') // find the .myClass in this div
  .addClass('Next'); // add class to it
});
.Next{
  background : red;
  color : #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div class=myClass>myClass</div>
</div>
<div>
    <div class=otherClass>Other</div>
</div>
<div>
    <div class=otherClass>Other</div>
</div>
<div>
    <div class=myClass>myClass</div>
</div>
<div>
    <div class=otherClass>Other</div>
</div>
<div>
    <div class=otherClass>Other</div>
</div>
<div>
    <div class=myClass>myClass</div>
</div>

Additional: if you need to reverse you'll need to use prevAll instead of nextAll and .last() instead of .first()

Upvotes: 1

Related Questions