我正在生成几个隐藏的输入字段,如:
<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.
}
});
甚至可能吗?
答案 0 :(得分:4)
您的代码存在问题:
document.getElementsByClassName
返回一个NodeList对象,当你将它推送到一个数组并使用forEach时,只有 1循环,并且回调函数中的entry
对象是NodeList对象没有split
方法。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
});