javascript - フィールドセット内のすべてのフィールドをループする方法はありますか?

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');
});