4

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

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

4

5 回答 5

6

您可以使用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 早于它。）

于 2010-05-25T18:49:53.810 回答
5

使用 jQuery（耶！）：

$('#fieldset-id :input').each(function(index,element) {
    //element is the specific field:
    $(element).doSomething();
});
于 2010-05-25T18:36:07.463 回答
1

请注意，以下解决方案适用于非 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();
};
于 2010-05-25T18:36:29.863 回答
0

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

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

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

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

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

于 2010-05-25T18:54:46.177 回答
-1

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

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

$('fieldset <selector>').each(function() {
  $(this).removeClass('old').addClass('new');
});
于 2010-05-25T18:35:24.470 回答