Remove [0] from getElementsByClassName

Question

I'm trying to remove the [0] from the below and instead replace with iteration as appears to be the solution on another post here

However my knowledge is very limited so it may be that this is not the solution or a variation is needed. The function is being called on on-click and I'm only looking for the element that is clicked to be activated. For example if there are two occurrences of "thishere", only the occurrence which is clicked will be called.

Any help would be much appreciated.

function zxcv(el) {
    el.style.display = "none";
    el.parentNode.parentNode.getElementsByClassName("thishere")[0].style.display = 'block';
    return false;
}

Seems you need to read about loops and iteration - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration — ThisClark, Nov 24 '15 at 14:27
**1.** Are there multiple elements having the same class? **2.** If yes, You want to remove class from all those elements or the first element only? — Tushar, Nov 24 '15 at 14:27
There are multiple elements with the same class name. I don't want all to be "opened" at the same time, just whatever one happens to be clicked. — f484126, Nov 24 '15 at 14:39

Marcos Pérez Gude · Accepted Answer · 2015-11-24T15:25:57.780

2

Just write a loop.

function zxcv(el) {
    el.style.display = "none";
    var elements = el.parentNode.parentNode.getElementsByClassName("thishere");
    for(var i in elements) {
           elements[i].style.display = 'block';
    }
    return false;
}

EDIT

As we talk in comments, to activate only onclick you can make this:

    function zxcv(el) {
      // catch element and set display block
        el.style.display = "block";
        return false;
    }


    var elements = document.getElementsByClassName("thishere");
    for(var i in elements) {
      // we hide all elements
      elements[i].style.display = "none";
      // we handled the click event
      elements[i].click(function(e) {
        // we call zxcv with the element as parameter
        zxcv(this);
      });
    }

edited Nov 24 '15 at 15:25

answered Nov 24 '15 at 14:26

Marcos Pérez Gude

21,869
4
38
69

Yes, sorry, I've copied the original snippet and I forget to remove the comment tags. Thank you for the remember :) – Marcos Pérez Gude Nov 24 '15 at 14:31
Thank you. This will likely be down to my lack of information but I was not intending for all the occurance os classname "thishere" to be activated at the same time, just whichever one was clicked. This solutions activates them all at the same time. – f484126 Nov 24 '15 at 14:41
In your question, you are not asking for that. You need to edit your question and ask a good question. Explain what you need and what you have got. We haven't got crystal balls. – Marcos Pérez Gude Nov 24 '15 at 14:43
You are correct my apologies; my lack of understanding precluded me from including more information from the off. I thought just iteration was what was needed but evidently not. – f484126 Nov 24 '15 at 15:00
Ok,I will try to understand what you need and will try to help you as better as I can. In theory, that you need is very very simple. – Marcos Pérez Gude Nov 24 '15 at 15:07
Thank you - I hope it proves to me very very simple! – f484126 Nov 24 '15 at 15:19
Are you copy&paste or are you adapting to your real code? This works, but it need to be adapted to your code. – Marcos Pérez Gude Nov 24 '15 at 16:23
Adapted how? I replaced 'zxcv' and 'thishere' for all occurrences with the name in the code. Something else needs adapting? – f484126 Nov 24 '15 at 16:44
Yes! Are you writing it inside a document.ready or something similiar? What is your html? Maybe it's better if you share a working fiddle / snippet. Read this and back with it: https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ – Marcos Pérez Gude Nov 24 '15 at 16:50
It should be working. My original code works, your first code posted also works but neither in the way I require.Your latest code nothing happens on click. – f484126 Nov 24 '15 at 16:55

score 0 · Answer 2 · answered Nov 24 '15 at 14:26

0

It sounds like you want to apply the same style to all matching elements?

If so:

function zxcv(el) {
  el.style.display = "none";

  var els = el.parentNode.parentNode.getElementsByClassName("thishere");

  for ( var i = 0; i < els.length; ++i )
    els[i].style.display = 'block';

  return false;
}

answered Nov 24 '15 at 14:26

Paul Roub

36,322
27
84
93

Thank you. This will likely be down to my lack of information but I was not intending for all the occurance os classname "thishere" to be activated at the same time, just whichever one was clicked. This solutions activates them all at the same time. – f484126 Nov 24 '15 at 14:43
You didn't show how the function was being called; nothing in the question indicates that this is happening on-click, or which element was clicked. Please edit the question to include that information. – Paul Roub Nov 24 '15 at 14:44
You're correct Paul. I have edited such my question so I hope it is clearer now. – f484126 Nov 24 '15 at 15:01

Adjit · Answer 3 · 2015-11-24T14:34:29.247

You just need to set up a loop similar to the Q&A you posted.

Steps:

Get an array with all of the elements whose class name is thishere

var elements = el.parentNode.parentNode.getElementsByClassName('thishere');
Create a loop to iterate through each element inside the elements array

for(var i in elements) { elements[i].style.display = 'block'; }

For the above loop, var i initializes a variable that will be used to iterate over the elements array. Then you use i as the index for the element in the array elements

score 0 · Answer 4 · answered Nov 24 '15 at 14:36

Just loop through the elements and apply style to [0]th element.

function zxcv(el) {
el.style.display = "none";
var elements = el.parentNode.parentNode.getElementsByClassName("thishere");
for( var i = 0; i < els.length; ++i ) {
       if(i===0)
       {
            elements[i].style.display = 'block';
            break;
       }
}
return false;}

Lucas Pottersky · Answer 5 · 2015-11-24T14:34:16.287

-2

One of the ways:

function zxcv(el) {
    el.style.display = "none";        
    el.parentNode.parentNode.getElementsByClassName("thishere").forEach(function(i, elem){
        elem.style.display = 'block';
    });
    return false;
}

There are several ways you can iterate through an array:

edited Nov 24 '15 at 14:34

answered Nov 24 '15 at 14:27

Lucas Pottersky

1,844
6
22
38

`each()` is from jQuery, but this code is not jQuery, it's pure javascript – Marcos Pérez Gude Nov 24 '15 at 14:29
I meant forEach, which is ECMAScript 5. Sorry. – Lucas Pottersky Nov 24 '15 at 14:34

Remove [0] from getElementsByClassName

5 Answers5

EDIT