ラベルからfor属性の内容を取得するにはどうすればよいですか？

私は3つのフィールドを持つhtmlフォームを持っていますが、私はラベルのテキストを知っているので、IDのためにラベルのfor属性を使って入力タグのIDをつかむJS/jQuery関数を書いてみたいと思います。ラベルからfor属性の内容を取得するにはどうすればよいですか？

たとえば、ラベルテキスト「名前」は認識されますが、その属性のテキストは認識されません。

有望な解：関数は既知のラベルの配列をとり、それをループしてidを取得し、nameToId = {key1： 'value1'、key2： 'value2'などの連想配列を返します。 };

var arr = ['Name:', 'E-mail:', 'Message:']; 
 

 
function scan(arr) { 
 
    for (var i = 0; i < arr.length; i++) { 
 
    var labelFor = $("label:contains(" + arr[i] + ")").attr('for'); 
 
    console.log(labelFor); 
 
    } 
 
    // return nameToID 
 
} 
 

 
scan(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Form Test</title> 
 
    <script type="text/javascript" src="form.js"></script> 
 
</head> 
 
<body> 
 
    <form action="/my-handling-form-page" method="post"> 
 
    <div> 
 
     <label for="unknow">Name:</label> 
 
     <input type="text" id="unknow" name="user_name"> 
 
    </div> 
 
    <div> 
 
     <label for="unknow2">E-mail:</label> 
 
     <input type="email" id="unknow2" name="user_mail"> 
 
    </div> 
 
    <div> 
 
     <label for="unknow3">Message:</label> 
 
     <textarea id="unknow3" name="user_message"></textarea> 
 
    </div> 
 
</form> 
 
</body> 
 
</html>

出典

2017-11-03 YMA981

あなたはcontains selectorを使用することができます。

const names = ['Name:', 'E-mail:', 'Message:']; 
 
const labels = [...document.querySelectorAll('label')]; 
 

 
const scan = (arr, names) => { 
 
    return arr.map((label, index) => { 
 
     return (names.indexOf(label.textContent) >= 0) ? 
 
      (document.getElementById(label.getAttribute('for'))) : false; 
 
    }); 
 
}; 
 

 
const inputElements = scan(labels, names); 
 
console.log(inputElements);

<form action="/my-handling-form-page" method="post"> 
 
    <div> 
 
     <label for="unknow">Name:</label> 
 
     <input type="text" id="unknow" name="user_name"> 
 
    </div> 
 
    <div> 
 
     <label for="unknow2">E-mail:</label> 
 
     <input type="email" id="unknow2" name="user_mail"> 
 
    </div> 
 
    <div> 
 
     <label for="unknow3">Message:</label> 
 
     <textarea id="unknow3" name="user_message"></textarea> 
 
    </div> 
 
</form>

私はそれがあなたの最後のパスで推測しているので、私は、先に行って、というだけのプレーンテキストよりも、それらのid秒の実際のノードを、返されました。そうでない場合はmapメソッドからdocument.getElementByIdラッパーを削除することができます。 ES5のJavaScriptで

出典

2017-11-03 16:54:39 APAD1

あなたは純粋なJavaScriptでgetAttributeでindexOfを使用することができます。

var arr = ['Name:', 'E-mail:', 'Message:']; 
 

 
function scan(arr) { 
 
    for (var i = 0; i < arr.length; i++) { 
 
    // get the IDs which are the text of the for attribute 
 
    } 
 
    // return nameToID 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Form Test</title> 
 
    <script type="text/javascript" src="form.js"></script> 
 
</head> 
 
<body> 
 
    <form action="/my-handling-form-page" method="post"> 
 
    <div> 
 
     <label for="unknow">Name:</label> 
 
     <input type="text" id="unknow" name="user_name"> 
 
    </div> 
 
    <div> 
 
     <label for="unknow2">E-mail:</label> 
 
     <input type="email" id="unknow2" name="user_mail"> 
 
    </div> 
 
    <div> 
 
     <label for="unknow3">Message:</label> 
 
     <textarea id="unknow3" name="user_message"></textarea> 
 
    </div> 
 
</form> 
 
</body> 
 
</html>

出典

2017-11-03 17:03:32 ryanpcmcquen

、あなたはこのラベルは、彼らが `Array`しているのと同じ順序で表示されると仮定し、単純な「forEachの」ループ

var arr = ['Name:', 'E-mail:', 'Message:']; 
    function scan() { 
    var labels = document.getElementsByTagName('label'); 
    console.log(labels); 
    var labelText_to_labelFor_map = {}; 
    [].forEach.call(labels,function(label){ 
    if (arr.indexOf(label.textContent) >= 0) { 
     labelText_to_labelFor_map[label.textContent] = label.getAttribute('for'); 
    } 
    }); 
    console.log(labelText_to_labelFor_map); 
    } 
    scan(arr);

出典

2017-11-03 17:16:52

でそれを書くことができます。 – ryanpcmcquen

ラベルからfor属性の内容を取得するにはどうすればよいですか？

答えて

関連する問題