循环遍历div数组以确定每个元素是否都有一个子元素

Question

我正在遍历div的数组，我需要检查数组的每个元素是否都有一个子元素。

运行下面的代码将为每个元素创建console.log，但是我只想console.log“一个孩子存在！” 在tileArray中的每个tile都有一个子元素的情况下。 如何做到这一点？

    function hasTile(tilesArray){
       for(var i = 0; i < tilesArray.length; i++){
           console.log(tilesArray[t]);
           if(tilesArray[i].firstChild){
               console.log("A child exists!");
           }else{
               console.log("No child.");
           }
       }
    }

的index.html

        <div class="container" id="tileContainer">
  <!-- id listed by row-column notation. -->
  <div class="row">
    <div class="col-xs-6 col-md-12 tile" id="r1c1" onclick="main(this)"></div>
    <div class="col-xs-6 col-md-12 tile" id="r1c2" onclick="main(this)"></div>
    <div class="col-xs-6 col-md-12 tile" id="r1c3" onclick="main(this)"></div>
  </div>

  <div class="row">
    <div class="col-xs-6 col-md-12 tile" id="r2c1" onclick="main(this)"></div>
    <div class="col-xs-6 col-md-12 tile" id="r2c2" onclick="main(this)"></div>
    <div class="col-xs-6 col-md-12 tile" id="r2c3" onclick="main(this)"></div>
  </div>

  <div class="row">
    <div class="col-xs-6 col-md-12 tile" id="r3c1" onclick="main(this)"></div>
    <div class="col-xs-6 col-md-12 tile" id="r3c2" onclick="main(this)"></div>
    <div class="col-xs-6 col-md-12 tile" id="r3c3" onclick="main(this)"></div>
  </div>
</div>
<!-- End of tile container -->

<div class="container" id="turnDisplayContainer">
  <div class="row">
    <div class="col-xs-9 col-md-6 content" id="userTurnDisplay">
      <h4>Your Turn</h4>
    </div>
    <div class="col-xs-9 col-md-6 content" id="computerTurnDisplay">
      <h5>Computer's Turn</h5>
      <iframe src="assets/media/loading-wheel.gif" width="50" height="50" scrolling="no" frameBorder="0"></iframe>
    </div>
  </div>
</div>
<!-- <div class="container" id="timerDisplayContainer">
  <div class="row">
    <div class="col-xs-18 col-md-12 content" id="timerDisplay">
      <h5>Timer</h5>
    </div>
  </div>
</div> -->
<div class="container btnContainer">
  <div class="row">
      <button type="button" class="btn btn-danger" id="resetButton">Reset</button>
  </div>
</div>

<img class="img img-responsive gameIcon" src="assets/img/green-ring.png" alt="Green Ring Icon" id="userIcon" />
<img class="img img-responsive gameIcon" src="assets/img/red-x.png" alt="Red X Icon" id="computerIcon" />

Answer 1

您应该将其他信息存储在本地变量中。 例：

function hasTile(tilesArray){
   var bAllHaveChild = tilesArray.length > 0;
   for(var i = 0; i < tilesArray.length; i++){
       console.log(tilesArray[t]);
       if(!tilesArray[i].firstChild){
          bAllHaveChild=false;
       }
   }
   if(bAllHaveChild)
       console.log("A child exists!");
   else
       console.log("No child.");
}

希望对您有所帮助。 再见

Answer 2

更新

我想出了一种性能更高的方法。 这个特殊的问题非常适合通过document.evaluate XPath。 使用XPath，您可以在具有内容的元素上创建选择路径。

尽管我认为这些应该在竞走中击败其他选择，但是XPath通常比querySelectorAll过滤版本快5倍。

 const xpath = 'boolean(.//div/div/text())' const hasTileXPath = (id) => document.evaluate(xpath, document.getElementById(id)).booleanValue const hasTile = (id) => Array.from( document.querySelectorAll(`#${id} > div > div`) ).filter((x) => x.innerHTML).length > 0 const iterations = 1000 const iterable = Array(iterations).fill().map((x, i) => i) const pre = performance.now() for(let i of iterable) { hasTileXPath('hasNoTiles') hasTileXPath('hasTiles') } const mid = performance.now() for(let i of iterable) { hasTile('hasNoTiles') hasTile('hasTiles') } const last = performance.now() console.info(`XPath: ${iterations} iterations @ ${(mid - pre) / 1000}s`) console.info(`SHOULD NOT HAVE TILES (XPATH) => ${hasTile('hasNoTiles')}`) console.info(`SHOULD HAVE TILES (XPATH) => ${hasTile('hasTiles')}`) console.info(`querySelectorAll: ${iterations} iterations @ ${(last - mid) / 1000}s`) console.info(`SHOULD NOT HAVE TILES => ${hasTileXPath('hasNoTiles')}`) console.info(`SHOULD HAVE TILES => ${hasTileXPath('hasTiles')}`) 

  <div id="hasNoTiles"> <div> <div></div> <div></div> </div> <div> <div></div> <div></div> </div> <div> <div></div> <div></div> </div> </div> <div id="hasTiles"> <div> <div></div> <div></div> </div> <div> <div></div> <div>TILE</div> </div> <div> <div></div> <div>TILE</div> </div> </div> 

Answer 3

一种紧凑的方法是使用querySelectorAll()检查.tile:empty集合的length 。 如果为0，则所有div都有子元素；否则为0。 如果没有，则可以遍历数组并进行console.log全部记录。

((tiles,len,x)=>{
    if(!len=(tiles=document.querySelectorAll(".tile:empty")).length)
        console.log("All .tile elements contain child elements.");
    else
        for(x=0;x<len;x++)
            console.log("div#"+tiles[x].id+" does not contain any child elements.");
})();

（很抱歉缺少有效的示例或任何可能的错字；我在手机上写下了这些内容-当我回到计算机时会对其进行清理 ）

Answer 4

var tilesArray = Array.prototype.slice.call(tilesArray);

var fails = tilesArray.some(function(element) {
    return element.children.length === 0;
})

if (fails) {
    console.log("No child.");       
} else {
    console.log("A child exists!");
}

Answer 5

每当找到没有孩子的div时，您都可以退出该函数。 这样，除非所有div都有子级，否则console.log不会触发。

function hasTile(tilesArray){
   tilesArray.forEach(function(element) {
       if (element.children.length < 1) {
           return;
       }
   });
   console.log("a child exists!");
}