javascript - 纯js中的foreach循环，检查匹配

Question

我正在生成几个隐藏的输入字段，例如:

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

之后我用 Angular 做一些事情，但 Angular 不接受 jQuery。所以它应该是Javascript。这就是我陷入困境的地方..

我想检查以下 html 是否与输入隐藏字段匹配:

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

在下面的代码中，我已经做了一些从 jQuery 到纯 JS 的转换。

如果 foobar-paragraph 中的文本与隐藏输入字段的第二部分匹配，那么它应该添加一个类。

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.   
    }
});

这可能吗？

Answer 1

您的代码存在问题:

• document.getElementsByClassName 返回一个 NodeList 对象，当您将其推送到数组并使用 forEach 时，只有 1 个循环 和您的条目 回调函数中的对象是NodeList对象，没有split方法。
• 要访问隐藏字段值，您需要访问 DOM 的 value 属性
• 使用split('-')代替split(',')

尝试:

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.   
    }
};

如果要使用forEach，则需要使用Array.prototype.slice.call将NodeList转换为数组。例如:

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.   
        }
  });

另一个解决方案是使用Array.prototype.forEach.call。

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

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

DEMO