javascript - foreach loops in pure js, checking for matches - Stack Overflow

I'm generating several hidden input fields like:

<input class="activeList" type="hidden" value="foobar-value"/>

Afterwards I'm doing stuff with Angular, but Angular isn't accepting jQuery. So it should be in Javascript. That's where I get stuck..

I wanna check of the following html matches with the input hidden field:

 <p class="foobar">value</p>

In the code underneath I already did some transformation from jQuery to pure JS.

If the text inside the foobar-paragraph matches the second part of the hidden input field, then it should add a class.

var activeList = [];
activeList.push(document.getElementsByClassName('activeList'));

activeList.forEach(function(entry) 
{    
    var string = entry.split(','); // gives an array of: [foobar,value];

    $('.'+string[0]).each(function()
    {
        if($(this).text() == string[1])
        {
            $(this).addClass('yes'); 
            // makes: .foobar.yes
        }
    });

    if (document.getElementsByClassName(string[0]).length){ 
        /// this is the farest i get.   
    }
});

Is it even possible?

I'm generating several hidden input fields like:

<input class="activeList" type="hidden" value="foobar-value"/>

Afterwards I'm doing stuff with Angular, but Angular isn't accepting jQuery. So it should be in Javascript. That's where I get stuck..

I wanna check of the following html matches with the input hidden field:

 <p class="foobar">value</p>

In the code underneath I already did some transformation from jQuery to pure JS.

If the text inside the foobar-paragraph matches the second part of the hidden input field, then it should add a class.

var activeList = [];
activeList.push(document.getElementsByClassName('activeList'));

activeList.forEach(function(entry) 
{    
    var string = entry.split(','); // gives an array of: [foobar,value];

    $('.'+string[0]).each(function()
    {
        if($(this).text() == string[1])
        {
            $(this).addClass('yes'); 
            // makes: .foobar.yes
        }
    });

    if (document.getElementsByClassName(string[0]).length){ 
        /// this is the farest i get.   
    }
});

Is it even possible?

• javascript
• html
• angularjs

Share Improve this question Follow asked Jan 25, 2014 at 0:29 user3233979user3233979 1111 silver badge11 bronze badge 2

• 1 You should be using ng-model to access the input value. – Matt Way Commented Jan 25, 2014 at 0:39
• 2 Have you added a reference to pure.js? – PW Kad Commented Jan 25, 2014 at 1:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

There are problems with your code:

• document.getElementsByClassName returns a NodeList object, when you push it to an array and use forEach, there is only 1 loop and your entry object in the callback function is the NodeList object which does not have split method.
• To access hidden field value, you need to access value property of the DOM
• Use split('-') instead of split(',')

Try:

var activeList = document.getElementsByClassName('activeList');//document.getElementsByClassName returns a NodeList

for (i=0;i<activeList.length;i++)
{    
    var string = activeList[i].value.split('-'); // you have to access the value attribute and change , to -

    $('.'+string[0]).each(function()
    {
        if($(this).text() == string[1])
        {
            $(this).addClass('yes'); 
            // makes: .foobar.yes
        }
    });

    if (document.getElementsByClassName(string[0]).length){ 
        /// this is the farest i get.   
    }
};

If you want to use forEach, you need to convert the NodeList to array using Array.prototype.slice.call. For example:

var activeList = Array.prototype.slice.call(document.getElementsByClassName('activeList'));

activeList.forEach(function(entry)
    {    
        var string = entry.value.split('-'); // you have to access the value attribute and change , to -

        $('.'+string[0]).each(function()
        {
            if($(this).text() == string[1])
            {
                $(this).addClass('yes'); 
                // makes: .foobar.yes
            }
        });

        if (document.getElementsByClassName(string[0]).length){ 
            /// this is the farest i get.   
        }
  });

Another solution is using Array.prototype.forEach.call.

var activeList = document.getElementsByClassName('activeList');

Array.prototype.forEach.call(activeList ,function(entry){    
   //Your code just like above
});

DEMO