有没有办法遍历字段集中的所有字段？答案

【问题标题】：Is there a way to loop through all fields in a fieldset?有没有办法遍历字段集中的所有字段？
【发布时间】：2010-05-26 02:54:46
【问题描述】：

我想更改特定字段集中所有字段的类。

有没有办法循环遍历字段集中的字段？

【问题讨论】：

标签： javascript html fieldset

【解决方案1】：

您可以使用getElementsByTagName。

var fieldset= document.getElementById('something');
var fieldtags= ['input', 'textarea', 'select', 'button'];

for (var tagi= fieldtags.length; tagi-->0) {
    var fields= fieldset.getElementsByTagName(fieldtags[tagi]);
    for (var fieldi= fields.length; fieldi-->0;) {

        fields[fieldi].className= 'hello';
    }
}

（如果您只关心input 字段，您可能会丢失外部标签循环。）

如果您需要它们按文档顺序（而不是按标签分组），则必须手动遍历元素，这会很痛苦而且有点慢。您可以使用fieldset.querySelectorAll('input, textarea, select, button')，但并非所有浏览器都支持它。（尤其是 IE6-7 早于它。）

【讨论】：

感谢您提供了一个可行的解决方案，该解决方案不需要使用整个库来完成如此简单的事情。 +1
问题是，简单的fieldi-- 有什么问题... >0 测试不是多余的吗？
这是反向（或顺序无关）迭代的通用习惯用法。在这种情况下它是多余的，但否则它将防止上限低于下限（在这种情况下，如果没有>0，您将获得无限循环。

【解决方案2】：

使用 jQuery（耶！）：

$('#fieldset-id :input').each(function(index,element) {
    //element is the specific field:
    $(element).doSomething();
});

【讨论】：

OP 在哪里提到他/她正在使用 jQuery？
@J-P 仅仅因为他们没有明确表示他们没有使用 jQuery 并不意味着它不是一个可行的选择。引入一个库来解决这个问题有点过头了，但是下一个类似的问题我们节省了一点，之后我们节省了一点时间，然后就值得了。
那么，为什么不探索所有其他可能性呢？穆工具？原型？道场？分机？酷狗？ ...我认为最好始终假设 OP 希望使用 no 库，除非明确说明。

【解决方案3】：

请注意，以下解决方案适用于非 JQUERY 实现。

像这样实现一个 getElementsByClassName 方法：

实现下面的代码后，您可以使用 document.getElementsByClassName("elementsInFieldSetClass") 它将返回具有该类的元素数组。

function initializeGetElementsByClassName ()
        {
            if (document.getElementsByClassName == undefined) {
                document.getElementsByClassName = function(className)
                {
                    var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
                    var allElements = document.getElementsByTagName("*");
                    var results = [];

                    var element;
                    for (var i = 0; (element = allElements[i]) != null; i++) {
                        var elementClass = element.className;
                        if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                            results.push(element);
                    }
                    return results;
                }
            }
        }

window.onload = function () {
    initializeGetElementsByClassName();
};

【讨论】：

【解决方案4】：

这里是另一个 jQuery 解决方案。

如果您只是向元素添加一个类，就这么简单：

$('fieldset :input').addClass('newClass');

.addClass()（与许多其他 jQuery 函数一样）将作用于与选择器匹配的所有元素。

示例：http://jsfiddle.net/HANSG/8/

【讨论】：

【解决方案5】：

永久？在您选择的编辑器中查找和替换。

当用户点击某物时？ jQuery方式：

$('fieldset <selector>').each(function() {
  $(this).removeClass('old').addClass('new');
});

【讨论】：