检查具有相同属性的元素是否有任何具有活动类名的子元素

Question

我正在尝试找出是否所有(ul)元素都有匹配的data-validation (required)，并且它的任何子元素(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通过this在ul-cls类中获取所需的元素/类，如下所示。我编辑了代码片段中的HTML内容，并在第一个ul div上添加了active类以检查条件。

​

$(".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

这似乎起作用了！

 SetTimeout(function(){

 var numReq = $('.fields .ul-cls[data-validation="required"]').length,
     numSel = $('.fields .ul-cls[data-validation="required"] li div.active').length; 

 console.log(numReq+"->"+numSel);

 if(numSel >= numReq){
     alert('validated!')
 }else{
    console.log('not valid')
 }
}, 100); 

// Set Timeout because click action delays update