Прокрутите массив из div, чтобы определить, имеет ли каждый элемент дочерний элемент

Я перебираю массив функции hasTile (tilesArray) {для (var i = 0; i <tilesArray.length; i ++) {console.log (tilesArray [t]); if (tilesArray [i] .firstChild) {console.log («Ребенок существует!»); } else {console.log («Нет ребенка»); }}}, и мне нужно проверить, есть ли в каждом элементе массива дочерний элемент.

Запуск кода ниже будет <div class = "container" id = "tileContainer"> <! - id, указанным в виде столбца строки. -> <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> <! - Конец контейнера для плитки -> <div class = "container" id = "turnDisplayContainer"> <div class = "row"> <div class = "col-xs-9 col-md-6 content "id =" userTurnDisplay "> <h4> Ваш поворот </ h4> </ div> <div class =" col-xs-9 col-md-6 content "id =" computerTu rnDisplay "> <h5> Поворот компьютера </ h5> <iframe src =" assets / media / load-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 "> Сброс </ button> </ div> </ div> <img class =" img img-responsive gameIcon "src =" активы / img / green-ring.png "alt =" Значок зеленого кольца "id =" userIcon "/> <img class =" img img-responsive gameIcon "src =" assets / img / red-x.png "alt = «Red X Icon» id = «computerIcon» /> для каждого элемента, однако я хочу использовать 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 («Ребенок существует!»); else console.log («Нет ребенка»); } «ребенок существует!» при условии, чтокаждая плитка в элементе tilesArray имеет дочерний элемент. Как это можно достичь?

document.evaluate

index.html

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')}`)

javascript,html,function,loops,

2

Ответов: 5

1 принят

Вы должны сохранить дополнительную информацию в локальной переменной. Пример:

    <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>

Я надеюсь, что это помогает. до свидания

1

ОБНОВЛЕНО

Я придумал гораздо более эффективный способ сделать это. Эта конкретная проблема хорошо подходит для XPath через length. С XPath у вас есть возможность создать путь выбора для элементов, имеющих контент.

Хотя я считаю, что они должны выбить другие варианты здесь, в гонке на ногах, XPath обычно приходит в 5 раз быстрее, чем версия фильтрации querySelectorAll.

.tile:empty
querySelectorAll()

1

Компактный способ сделать это было бы проверить divиз 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."); })(); . Если это 0, то все divs имеют дочерние элементы; если нет, то вы можете перебирать массив и console.logвсе их.

console.log

( Извиняюсь за отсутствие рабочего примера или за любые потенциальные опечатки, я написал это на своем телефоне - я починю его, когда вернусь к компьютеру )

0

Вы можете вернуться из функции всякий раз, когда будет найден div без дочернего элемента. Таким образом console.log, не будет стрелять, если у всех детей нет детей.

function hasTile(tilesArray){
   tilesArray.forEach(function(element) {
       if (element.children.length < 1) {
           return;
       }
   });
   console.log("a child exists!");
}
0 
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!");
}
JavaScript, HTML, функция, петли,
Похожие вопросы
Яндекс.Метрика