Question

我正在尝试查找所有（ul）元素是否具有（必需）的匹配数据验证，并且其任何子级（li）具有（active）类。我只想确保ul具有活动的div。

我的代码如下：

<div class="fields">
    <ul class="ul-cls" data-validation="required">
        <li><div class="active"></div></liv>
        <li><div class=" "></div></liv>
    </ul>

    <ul class="ul-cls" data-validation="required">
        <li><div class="active"></div></liv>
        <li><div class=" "></div></liv>
        <li><div class=" "></div></liv>
        <li><div class="active"></div></liv>
    </ul>

    <ul class="ul-cls" data-validation="not-required">
        <li><div class="active"></div></liv>
        <li><div class="active"></div></liv>
    </ul>
</div>

我的JavaScript代码是：

$(".fields .ul-cls").each(function() {
    if ($(".ul-cls", this).attr('data-validation') == 'required') {
        if ($("li div.active").length >=1) {
            // Do something
        }
    }
});

Answer 1

您可以使用Array.prototype.every来检查每个.fields .ul-cls[data-validation="required"]都有一个.active后代。另外请注意，您应在<li>标记后加上</li>，而不是</liv>：

const allActive = Array.prototype.every.call(
  $('.fields .ul-cls[data-validation="required"]'),
  ul => $(ul).find('.active').length >= 1
);
if (allActive) {
  console.log('all are active!');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fields">
  <ul class="ul-cls" data-validation="required">
    <li>
      <div class="active"></div>
    </li>
    <li>
      <div class=" "></div>
    </li>
  </ul>
  <ul class="ul-cls" data-validation="required">
    <li>
      <div class="active"></div>
    </li>
    <li>
      <div class=" "></div>
    </li>
    <li>
      <div class=" "></div>
    </li>
    <li>
      <div class="active"></div>
    </li>
  </ul>
  <ul class="ul-cls" data-validation="not-required">
    <li>
      <div class="active"></div>
    </li>
    <li>
      <div class="active"></div>
    </li>
  </ul>
</div>

不通过的示例：

const allActive = Array.prototype.every.call(
  $('.fields .ul-cls[data-validation="required"]'),
  ul => $(ul).find('.active').length >= 1
);
if (allActive) {
  console.log('all are active!');
} else {
  console.log('fail');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fields">
  <ul class="ul-cls" data-validation="required">
    <li>
      <div>this one is required but not active</div>
    </li>
    <li>
      <div class=" "></div>
    </li>
  </ul>
  <ul class="ul-cls" data-validation="required">
    <li>
      <div class="active"></div>
    </li>
    <li>
      <div class=" "></div>
    </li>
    <li>
      <div class=" "></div>
    </li>
    <li>
      <div class="active"></div>
    </li>
  </ul>
  <ul class="ul-cls" data-validation="not-required">
    <li>
      <div class="active"></div>
    </li>
    <li>
      <div class="active"></div>
    </li>
  </ul>
</div>

Answer 2

使用find通过ul-cls在this类中获取所需的元素/类，如下所示。我在摘要中编辑了您的HTML内容，并在第一个active上添加了ul div类，以检查条件。

$(".fields .ul-cls").each(function() {

  if ($(this).attr('data-validation') == 'required') {
      if ($(this).find($("li div.active")).length == $(this).find($(" li div")).length) {
      console.log('Pass the test')
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fields">
  <ul class="ul-cls" data-validation="required">
    <li>
      <div class="active"></div>
    </li>
    <li>
      <div class="active"></div>
    </li>
  </ul>

  <ul class="ul-cls" data-validation="required">
    <li>
      <div class="active"></div>
    </li>
    <li>
      <div class=" "></div>
    </li>
    <li>
      <div class=" "></div>
    </li>
    <li>
      <div class="active"></div>
    </li>
  </ul>

  <ul class="ul-cls" data-validation="not-required">
    <li>
      <div class="active"></div>
    </li>
    <li>
      <div class="active"></div>
    </li>
  </ul>
</div>

Answer 3

这似乎有效！

if-else

jQuery：检查所有具有相同attr的必需元素是否具有任何活动的元素

3 个答案: