Question

我该怎么做：

<div class="hit"></div>
<div class="hit"></div>
<div class="hit"></div>
...

我有几个具有相同类名hit的元素，默认情况下为空，但是如果用户请求，它们可能会充满内容。

<div class="hit"><span id="t1"><p>Some text</p></span></div>
<div class="hit"></div>
<div class="hit"><img alt="" src=""></div>
...

我需要检查它们是否全部（不仅仅是一个或两个，而是全部）内部都有内容，然后执行一个功能。

获得以下结果的最佳选择是什么？

注意：我的示例仅显示三个具有该类名称的div，但这仅用于展示，页面上的div实际数量可能有所不同。

这三个都具有内容= true；三分之二= false；三个都不是false;

希望您能明白。

如何做到？

我决定将我的previous问题分为几个较小的问题（较不复杂），这是我到目前为止所尝试的：

function match(el) {return el.length > 0;}
if (document.getElementsByClassName("hit").every(match)) {}

Answer 1

您可以将dom集合传递给Array.from()，以将其转换为数组，并且要检查是否有子对象

function match(el) {return el.children.length;}
if (Array.from(document.getElementsByClassName("hit")).every(match)) {}

Answer 2

由于您使用的是jQuery，因此可以使用:empty选择器，例如：

if ($('.hit:empty').length > 0) {
  console.log('Not all the divs filled.');
} else {
  alert('All the divs are filled.');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hit"><span id="t1"><p>Some text</p></span></div>
<div class="hit"></div>
<div class="hit"><img alt="" src=""></div>

每隔x ms检查一次，直到所有div都填满：

var checker = setInterval(function() {
  if ($('.hit:empty').length > 0) {
    console.log('Not all the divs filled.');
  } else {
    clearInterval(checker);
  }
}, 1000);

//JSUT FOR TEST PURPOSE
setTimeout(function() {
  $('.hit:empty').html('<b>test</b>');
}, 3000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hit"><span id="t1"><p>Some text</p></span></div>
<div class="hit"></div>
<div class="hit">Image here</div>

最大尝试次数示例：

var counter = 0;
var max_attempts = 3;

var checker = setInterval(function() {
  if ($('.hit:empty').length > 0) {
    console.log('Not all the divs filled.');
  } else {
    clearInterval(checker);
  }

  counter++;
  if (counter === max_attempts) {
    console.log('Max attempts reached');
    clearInterval(checker);
  }
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hit"><span id="t1"><p>Some text</p></span></div>
<div class="hit"></div>
<div class="hit"><img alt="" src=""></div>

Answer 3

您几乎可以遍历数组并检查每个元素是否都有子元素。

var hitElements = document.getElementsByClassName("hit");

var allHaveContent = true;

for (i=0; i< hitElements.length; i++)
{
    if(!hitElements[i].hasChildNodes())
    {
        allHavecontent = false;
        break;
    }
}

Answer 4

if( ($('.hit').is(':empty'))) {


   console.log(" Some div are Empty.");
 

} else {
   console.log('All the divs are filled.');

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hit"><span id="t1"><p>Some text</p></span></div>
<div class="hit">Some text</div>
<div class="hit"><img alt="" src="">Some text</div>

所有具有类名称的元素在JS内都具有html

4 个答案: