在纯js中循环循环,检查匹配

时间:2014-01-25 00:29:02

标签: javascript html angularjs

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

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

甚至可能吗?

1 个答案:

答案 0 :(得分:4)

您的代码存在问题:

  • document.getElementsByClassName返回一个NodeList对象,当你将它推送到一个数组并使用forEach时,只有 1循环,并且回调函数中的entry对象是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