Программно построить условие для использования в операторе if()

Предположим на минуту, что у меня есть что-то вроде этого:

if (document.getElementById('div1').innerHTML &&
    document.getElementById('div2').innerHTML &&
    document.getElementById('div3').innerHTML &&
    document.getElementById('div4').innerHTML &&
    document.getElementById('div5').innerHTML &&
    ...
    document.getElementById('div100').innerHTML)

Очевидно, что напечатать и поддерживать такое большое условное утверждение проблематично.

Я хотел бы какое-то решение, как:

var conditional = "";
for(var i = 1; i <= 100; i++){
  conditional += "document.getElementById('div" + i +"').innerHTML";
  if(i < 100) {
    conditional += " && ";
  }
}
if(interpretStringAsJSExpression(conditional)){
    console.log("all my divs have content");
}

Возможно ли что-то подобное в JavaScript?

Великие ответы были представлены, и я уверен, что я и другие выиграем от них. Тем не менее, чисто из любопытства, возможно ли хранить и запускать выражения или команды JavaScript в строках?

Как я предложил в моем примере: interpretStringAsJSExpression(conditional)

Ответ 1

Как и в других ответах, вы можете решить вашу проблему с условиями проще.

Но, чтобы ответить на ваш новый вопрос

Можно ли хранить и запускать выражения или команды JavaScript в виде строк из любопытства?

Да, вы можете написать код JavaScript в строку и выполнить его позже с помощью eval. Что вы не должны делать, если вы обеспокоены безопасностью или производительностью.

Ответ 2

Вы можете делать тесты в цикле.

var allOK = true;
for (var i = 1; i <= 100; i++) {
    if (!document.getElementById("div"+i).innerHTML) {
        allOK = false;
        break;
    }
}
if (allOK) {
    console.log("all my divs have content");
}

Вы также можете дать всем вашим DIV общий класс, а затем использовать встроенный итератор.

var allDivs = document.getElementsByClassName("divClass");
if (Array.from(allDivs).every(div => div.innerHTML)) {
    console.log("all my divs have content");
}

Ответ 3

Зачем интерпретировать строку кода? Есть и другие средства, как for петель:

var conditionResult = true;
for(var i = 1; conditionResult && (i < 101); i++) {
    conditionResult = conditionResult && document.getElementById('div' + i).innerHTML;
}

if(conditionResult) {
    // Do something here
}

Условие цикла for conditionResult && (i < 101) прервет цикл, как только conditionResult определено как ложное; нет необходимости продолжать цикл в этом случае.

Вы также можете использовать методы массива, как some и every если у вас есть элементы в массиве:

var arr = [/* array of DOM elements */];

var conditionResult = arr.every(elem => elem.innerHTML);   // This is equivalent to (innerHTML && innerHTML && ...)

var conditionResult = arr.some(elem => elem.innerHTML);    // This is equivalent to (innerHTML || innerHTML || ...)

Ответ 4

Вы можете установить condition в true и проверить каждое из них, установив condition в false и выйти из цикла, если таковые имеются в false.

var conditional = true;
for(var i = 1; i <= 100; i++){
  if (!document.getElementById('div' + i).innerHTML) {
        condition = false;
        break;
    }
}

Ответ 5

Используйте document.querySelectorAll для этого типа операции

// Get all the divs that have ids which start with div
var theDivs = document.querySelectorAll('[id^="div"]');
var i,l,el,divsWithContent = [];

// Loop through all theDivs
l = theDivs.length;
for(i = 0; i < l; i++) {
    // el is the div 
    el = theDivs[i];
    
    // Test to make sure the id is div followed by one or more digits
    if (/^div\d+$/.test(el.id)) {
        // If the div has something in it other than spaces, it got content
        if (el.textContent.trim() !== "") {
            // Save the divs with content in the array
            divsWithContent.push(el.id);
        }
    }
}

// Show the results 
document.getElementById("result").textContent = divsWithContent.join("\n");

<h1>Div test</h1>
<div id="div1">This</div>
<div id="div2">that</div>
<div id="div3"></div>
<div id="div4">and</div>
<div id="div5">the other thing</div>
<h2>Divs with content</h2>
<pre id="result"></pre>

Ответ 6

Вы можете просто сохранить document.getElementById('divXX').innerHTML элементы в массиве, а затем просто использовать

items.reduce((a, b) => a && b);

Таким образом, вы можете изменить отдельные элементы div в своем выражении, не создавая заново весь список

Ответ 7

Другой вариант, кроме eval заключается в использовании конструктора Function. Function немного более гибкая и позволяет вам сохранять скомпилированный код вместо того, чтобы каждый раз eval его. Однако они оба несут схожие риски безопасности.

var conditional = "";
for(var i = 1; i <= 6; i++){
  conditional += "document.getElementById('div" + i +"').innerHTML";
  if(i < 6) {
    conditional += " && ";
  }
}
const f = new Function('return (' + conditional + ') !== ""');

console.log(f());

<div id="div1">1</div>
<div id="div2"></div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5"></div>
<div id="div6">6</div>