Question

我有一个包含3个字段的html表单，我想编写一个JS / jQuery函数，它使用label的for属性来获取输入标记的id，因为我知道标签文本而不是ID。

例如，我知道标签文本“名称”，但不知道其属性的文本。

一个可能的解决方案：该函数获取已知标签的数组并循环遍历它以获取id并返回nameToId = {key1：'value1'，key2：'value2'等的关联数组...} ;

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>

Answer 1

您可以使用contains selector：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以将indexOf与getAttribute一起使用纯JavaScript。

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的实际节点，而不仅仅是纯文本，因为我猜这是你的最终路径。如果不是，您可以从document.getElementById方法中删除map包装。

Answer 3

在ES5 javascript中，您可以使用简单的＆＃39; forEach＆＃39;来编写它。环

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

如何从标签中获取for属性的内容？

3 个答案: