Question

我想要一个列表，其中包含表单中可用的所有标签，或者只是循环遍历它们的方法，然后逐个检查文本。

我先试了一下：

$('label').each(function() {
    console.log(this); // this was to test :/
});

以及后来的一些变化： $('input').labels().each(function() { ... }); $('label').siblings().each(function() { ... });

没有在此表单上工作：

<form class="form-group">
    <label for="id_name">Name:</label>
    <input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">

    <label for="id_cnpj">Cnpj:</label>
    <input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">

    <label for="id_cpf">Cpf:</label>
    <input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">

    <label for="id_rg">Rg:</label>
    <input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">

    <label for="id_federation_unity">Federation unity:</label>
    <select name="federation_unity" class="form-control" required="" id="id_federation_unity">

    and much more ....

</form>

参考：.labels()，.siblings()

我怎么能这样做？

修改我在这里犯了一个大的菜鸟故障，我很抱歉。我发现了什么问题。我应该把这样的整个代码放在第一位：

<!doctype html>
<html>
<body>
<form class="form-group">
    <label for="id_name">Name:</label>
    <input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">

    <label for="id_cnpj">Cnpj:</label>
    <input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">

    <label for="id_cpf">Cpf:</label>
    <input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">

    <label for="id_rg">Rg:</label>
    <input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">

    <label for="id_federation_unity">Federation unity:</label>
    <select name="federation_unity" class="form-control" required="" id="id_federation_unity">
</form>

<script src="jquery-3.2.1.min.js" rel="javascript"></script>
<script type="javascript">
    $('label').each(function() {
        console.log(this);
    });
</script>
</body>
</html>

问题

我通过删除<script type="javascript">jquery code here</script>属性更改了type="javascript"并且它有效。我认为type="javascript"的使用仅在<script>标记内定义<head>标记时才有效。

另一件事：我测试了版本$('label').siblings().each(function() { ... });，它也有效。

我非常感谢你们帮助我完成提交的第一个问题所花费的时间和精力。

Answer 1

选择form-group班级和label并使用each进行迭代，.text()方法将返回标签的文字内容。 trim()删除任何空格

$(".form-group label").each(function(i, v) {
  console.log($(v).text().trim())


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-group">
  <label for="id_name">Name:</label>
  <input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">

  <label for="id_cnpj">Cnpj:</label>
  <input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">

  <label for="id_cpf">Cpf:</label>
  <input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">

  <label for="id_rg">Rg:</label>
  <input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">

  <label for="id_federation_unity">Federation unity:</label>
  <select name="federation_unity" class="form-control" required="" id="id_federation_unity"></select>

</form>

Answer 2

也许你无法做到这一点，因为你有一个未公开的select标签，因为我理解你想要遍历表格中的所有标签，并且想要访问标签的兄弟姐妹，我在下面添加了一个代码，看看这是否是你想要的。我正在打印标签文本和下一个元素的id到标签，即输入

$(document).ready(function() {
  var labels = $("form label");
  labels.each(function() {
    console.log("Label Text " + $(this).text() + " ", "Next element id =" + $(this).next().attr('id'));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-group">
  <label for="id_name">Name:</label>
  <input type="text" name="name" maxlength="255" class="form-control" required="" id="id_name">

  <label for="id_cnpj">Cnpj:</label>
  <input type="text" name="cnpj" maxlength="14" class="form-control" required="" id="id_cnpj">

  <label for="id_cpf">Cpf:</label>
  <input type="text" name="cpf" maxlength="11" class="form-control" required="" id="id_cpf">

  <label for="id_rg">Rg:</label>
  <input type="text" name="rg" maxlength="14" class="form-control" required="" id="id_rg">

  <label for="id_federation_unity">Federation unity:</label>
  <select name="federation_unity" class="form-control" required="" id="id_federation_unity">
  </select>

  and much more ....

</form>

如何获取包含表单中可用的所有输入标签的列表

2 个答案: