在SELECT属性周围放置DIV等于麻烦,为什么? [英] Putting a DIV around a SELECT attribute is equal to trouble, why?
问题描述
我是一名javascript学习者。我有一个几乎完成的脚本。我只是想把DIV放在html选择属性的周围。如果我这样做,我的脚本将无法工作。为什么?这是禁止的吗?
http:// jsfiddle .net / triggerload / XHWwg / 159 /
< div id =test>
< select class =valueListname =n1>
< option selected value =0>< / option>
< option value =1> 1< / option>
< option value =2> 2< / option>
< option value =3> 3< / option>
< option value =4> 4< / option>
< option value =5> 5< / option>
< option value =6> 6< / option>
< option value =7> 7< / option>
< / select>
< / div>
这个问题几乎肯定与您的方式有关正在尝试抓取 select
元素:
function grabFormSelects(parent, class_name)
{
//创建新数组来保存节点
var nodes = [];
for(var i = 0; i< parent.childNodes.length; i ++)
{
var node = parent.childNodes [i];
//过滤掉任何不是元素节点的节点,并且没有我们要查找的类名
if(node.nodeType === 1&& node.className === class_name)
{
nodes.push(node);
}
}
返回节点;
}
您只检查的直接子节点, question_holder
,但是当您添加 div
时,选择
元素不再是直接的子元素 question_holder
,它是您添加的 div
的子元素。所以当然它不会被 grabFormSelect()
代码返回。
作为一个快速修复,你可以尝试:
$ pre $函数isDescendent(node,parent){
//查看是否有任何节点祖先匹配指定的父节点
while(node.parentNode&& node.parentNode!= parent){
node = node.parentNode;
}
返回node.parentNode == parent;
函数grabFormSelects(parent,class_name)
{
//使新数组保存节点
var nodes = [];
var selecting = document.getElementsByTagName(select);
for(var i = 0; i< selects.length; i ++)
{
var node = selects [i];
//过滤掉任何不是元素节点的节点,并且没有我们要查找的类名
if(node.nodeType === 1&& node.className === class_name&& isDescendent(node,parent))
{
nodes.push(node);
}
}
返回节点;
}
I am a javascript learner. I have a little script that is almost finished. I just want to put DIV's around the html select attribute. If I do that, my script won't work. Why? Is this forbidden?
http://jsfiddle.net/triggerload/XHWwg/159/
<div id="test">
<select class="valueList" name="n1">
<option selected value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
The problem almost certainly has to do with the way you are trying to grab the select
element:
function grabFormSelects(parent, class_name)
{
//make new array to hold nodes
var nodes = [];
for(var i=0;i<parent.childNodes.length;i++)
{
var node = parent.childNodes[i];
//filter out any node that isn't an element node and doesn't have the class name we're looking for
if(node.nodeType === 1 && node.className === class_name)
{
nodes.push(node);
}
}
return nodes;
}
You're checking only for direct child nodes of question_holder
, but when you add your div
the select
element is no longer a direct child of question_holder
, it is a child of the div
that you added. So of course it does not get returned by your grabFormSelect()
code.
As a quick fix, you can try:
function isDescendent(node, parent) {
//see if any of the nodes ancestors match the specified parent node
while (node.parentNode && node.parentNode != parent) {
node = node.parentNode;
}
return node.parentNode == parent;
}
function grabFormSelects(parent, class_name)
{
//make new array to hold nodes
var nodes = [];
var selects = document.getElementsByTagName("select");
for(var i=0;i<selects.length;i++)
{
var node = selects[i];
//filter out any node that isn't an element node and doesn't have the class name we're looking for
if(node.nodeType === 1 && node.className === class_name && isDescendent(node, parent))
{
nodes.push(node);
}
}
return nodes;
}
这篇关于在SELECT属性周围放置DIV等于麻烦,为什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!