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

Question

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

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

Answer 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 早于它。）

Answer 2

使用 jQuery（耶！）：

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

Answer 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();
};

Answer 4

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

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

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

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

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

Answer 5

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

当用户点击某些东西时？ jQuery 方式：

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