How to view the first element of the group via Scrollintoview()?-CodePudding

I'm trying to make some simple buttons to hide some elements in a group, and then make some scrollIntoView buttons to view the "first" visible instances of these elements when clicked. Hiding functions work fine, but viewing functions always go to the last element of the same class name. How to make them go to the first ones? I'm not experienced with javascript, so I'm sorry if my codes are repeating too much. Here's the HTML part:

<div class="element1 a">Element 1A</div>
<div class="element1 b">Element 1B</div>
<div class="element1 c">Element 1C</div>

<div class="element2 a">Element 2A</div>
<div class="element2 b">Element 2B</div>
<div class="element2 c">Element 2C</div>

<div class="element3 a">Element 3A</div>
<div class="element3 b">Element 3B</div>
<div class="element3 c">Element 3C</div>


<div class="hide" onclick="hide1()">Hide 1</div>
<div class="hide" onclick="hide2()">Hide 2</div>
<div class="hide" onclick="hide3()">Hide 3</div>

<div class="view" onclick="viewa()">View A</div>
<div class="view" onclick="viewb()">View B</div>
<div class="view" onclick="viewc()">View C</div>

The following functions work fine to hide the classes 1, 2 and 3:

function hide1() {
var i; var div = document.getElementsByClassName("element1");
for (i=0; i<div.length; i  ) {div[i].style.display = "none";}
}

function hide2() {
var i; var div = document.getElementsByClassName("element2");
for (i=0; i<div.length; i  ) {div[i].style.display = "none";}
}

function hide3() {
var i; var div = document.getElementsByClassName("element3");
for (i=0; i<div.length; i  ) {div[i].style.display = "none";}
}

And here's the part I have problem. When I hide a class by using the buttons above, the functions below always view the "last" visible instances of a, b or c. How should I edit this part in a simple way to view the "first" visible instances instead?

function viewa() {
var i; var div = document.getElementsByClassName("a");
for(i=0; i<div.length; i  ){div[i].scrollIntoView({behavior: "smooth"})};
}

function viewb() {
var i; var div = document.getElementsByClassName("b");
for(i=0; i<div.length; i  ){div[i].scrollIntoView({behavior: "smooth"})};
}

function viewc() {
var i; var div = document.getElementsByClassName("c");
for(i=0; i<div.length; i  ){div[i].scrollIntoView({behavior: "smooth"})};
}

EXAMPLE: When the button "View A" is clicked, it scrolls to "Element 3A", but I want it to scroll to "Element 1A"... When the button "Hide 1" is clicked first, and then "View A" is clicked, then it scrolls to "Element 3A" again, but I want it to scroll to "Element 2A" this time, since Element 1A is hidden now.

CodePudding user response：

When you trigger (for example) the viewa function, you're looping through all the elements with class 'a'. And then trigger the scrollIntoView function on those elements. So what you're basically doing is triggering scrollIntoView 3 times in a very short time, overruling the previous call with the next one every time. This explains why it always focuses on Element 3A (as it is the last element in the for loop).

What you want to do instead of looping through all elements, is find the first visible element:

document.querySelector('.a:not([style="display: none;"])')

This finds the first element with class "a" that does not have a style property of "display: none;" (which is what you're using to hide elements in the hide1 function).

So to fix your code:

function viewa() {
    let el = document.querySelector('.a:not([style="display: none;"])')
    el.scrollIntoView({ behavior: "smooth" })};
}