在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屋！