Question

我循环遍历div中包含属性'is-required'的一堆元素，运行正常。我现在试图捕获元素的名称，当它还包含'validate-string'时，到目前为止，我无法让它正常工作。它应该做的是当该元素包含'validate-string'属性时，它应该打印出元素的名称。在测试之外，我将运行一个函数来对其值进行一些自定义验证。

$('#foo').css('padding-top', '+=15px');

$(document).ready(function() {
  $('#myDiv input[is-required]').each(function() {
    console.log(this);

    if ($(this).attr('validate-string') === true) {
      console.log("Found one : " + this.name);
    }
  });
});

Answer 1

使用Javascript的原生hasAttribute方法：

$(document).ready(function() {
  $('#myDiv input[is-required]').each(function() {
    console.log(this);

    if (this.hasAttribute('validate-string')) {
      console.log("Found one : " + this.name);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div id="myDiv">
  <div class="form-horizontal">

    <div class="form-group">
      <label for="BusinessName" class="control-label col-lg-2 col-sm-4">Business</label>
      <div class="col-lg-10 col-sm-8">
        <input id="BusinessName" class="form-control" placeholder="Business Name" name="BusinessName" style="max-width:75%;" is-required validate-string />
      </div>
    </div>

    <div class="form-group">
      <label for="BusinessDescription" class="control-label col-lg-2 col-sm-4">Description</label>
      <div class="col-lg-10 col-sm-8">
        <input id="BusinessDescription" class="form-control" placeholder="Business Description" style="max-width:75%;" />
      </div>
    </div>

    <div class="form-group">
      <label for="BusinessDBResidence" class="control-label col-lg-2 col-sm-4">Database</label>
      <div class="col-lg-10 col-sm-8">
        <input id="BusinessDBResidence" class="form-control" placeholder="Business DB Residence" name="DBResidence" style="max-width:75%;" is-required validate-string />
      </div>
    </div>

    <div class="form-group">
      <label for="BusinessConnection" class="control-label col-lg-2 col-sm-4">Connection</label>
      <div class="col-lg-10 col-sm-8">
        <input id="BusinessConnection" class="form-control" placeholder="Business ConnectionString" name="ConnectionString" style="max-width:75%;" is-required validate-string />
      </div>
    </div>
  </div>
</div>

jQuery提供的大多数DOM操作都可以使用vanilla Javascript完成，没有任何问题。这是你的问题的无问题解决方案：

document.addEventListener('DOMContentLoaded', function() {
  let inputs = document.querySelectorAll('#myDiv input[is-required]')
  Array.prototype.forEach.call(inputs, function(input) {
    console.log(input);

    if (input.hasAttribute('validate-string')) {
      console.log("Found one : " + input.name);
    }
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div id="myDiv">
  <div class="form-horizontal">

    <div class="form-group">
      <label for="BusinessName" class="control-label col-lg-2 col-sm-4">Business</label>
      <div class="col-lg-10 col-sm-8">
        <input id="BusinessName" class="form-control" placeholder="Business Name" name="BusinessName" style="max-width:75%;" is-required validate-string />
      </div>
    </div>

    <div class="form-group">
      <label for="BusinessDescription" class="control-label col-lg-2 col-sm-4">Description</label>
      <div class="col-lg-10 col-sm-8">
        <input id="BusinessDescription" class="form-control" placeholder="Business Description" style="max-width:75%;" />
      </div>
    </div>

    <div class="form-group">
      <label for="BusinessDBResidence" class="control-label col-lg-2 col-sm-4">Database</label>
      <div class="col-lg-10 col-sm-8">
        <input id="BusinessDBResidence" class="form-control" placeholder="Business DB Residence" name="DBResidence" style="max-width:75%;" is-required validate-string />
      </div>
    </div>

    <div class="form-group">
      <label for="BusinessConnection" class="control-label col-lg-2 col-sm-4">Connection</label>
      <div class="col-lg-10 col-sm-8">
        <input id="BusinessConnection" class="form-control" placeholder="Business ConnectionString" name="ConnectionString" style="max-width:75%;" is-required validate-string />
      </div>
    </div>
  </div>
</div>

如何获取循环的元素的其他属性

1 个答案: