Question

让我们暂时假设我有这样的东西：

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)

Answer 1

您可以循环进行测试。

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");
}

Answer 2

如其他答案所述，您可以更轻松地解决条件问题。

但是，要回答您的新问题

纯粹出于好奇，可以存储和运行 JavaScript表达式或字符串命令？

是的，您可以将JavaScript代码编写为字符串，然后稍后使用eval执行它。如果您担心安全性或性能，则不应该这样做。

Answer 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 || ...)

Answer 4

您可以将condition设置为true并进行检查，将condition设置为false并在错误的情况下退出循环。

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

Answer 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's 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>

参考：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Answer 6

您可以将document.getElementById('divXX').innerHTML个项目存储在一个数组中，然后使用

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

这样，您可以更改表达式中的各个div元素，而不必重新创建整个列表

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

以编程方式构造在if（）语句中使用的条件

7 个答案: