Javascript 如何使用doc.getElementbyClassName查找元素是否为空

我有下面的HTML表格作为发票。它会生成供我下载并打印出来。但是，由于各种原因，某些元素可能为空，这会导致整行右/左对齐，因为缺少文本。所以我想写一些代码来检查一个元素是否为空，如果为空，在那里放一些空白

这是桌子

<div class="invoiceTable">
  <div class="titles2" style="padding-top: 15px;padding-bottom: 15px;">
    <div class="invoice-qty">Qty</div>

    <div class="invoice-loc">Loc</div>
    <div class="invoice-items">Items</div>
    <div class="invoice-cus">Stock</div>
    <div class="invoice-id">Item ID</div>
    <div class="invoice-ais" style="text-align: right;">2loc</div>

    <div class="clear"></div>
  </div>
  <!--START: items-->
  <div class="row" style="border-bottom: solid;border-width: 1px;padding-top: 15px;padding-bottom: 15px;">
    <div class="invoice-qty">[numitems]</div>
    <div class="invoice-loc">[warehouse_location]</div>
    <div class="invoice-items">[itemname]</div>
    <!--START: warehouse_location-->

    <div class="invoice-cus" style="text-align:center;">[warehouse_custom]</div>
    <div class="invoice-id" style="text-align:center;">[id]</div>
    <div class="invoice-ais" style="text-align:center;">[warehouse_aisle]</div>
    <div class="clear"></div>
    <!--END: warehouse_location-->
  </div>
</div>

数量
Loc
项目
股票
项目ID
2loc
[努米特斯]
[仓库位置]
[项目名称]
[仓库/海关]
[id]
[仓库/走道]

我现在想测试“invoice ais”行的位是否为空

我有下面的脚本，它也在检查它是否为空，然后向控制台输出一条消息。在我看来，我需要遍历invoice ais类的所有元素，并检查它们是否为空

$(document).ready(function() {
  var doc = document.getElementsByClassName('invoice-ais');

  for (var i = 0; i < doc.length; i++) {
    if (doc.getElementById(i) == '') {
      console.log("empty");
    }
  }
});

$（文档）.ready（函数（）{
var doc=document.getElementsByClassName（'invoice-ais'）；
对于（变量i=0；i

这会产生以下错误

doc.getElementById不是函数

---

您应该使用

doc[i]

访问一个特定元素，然后您可以检查

textContent

属性，并对其应用

trim

，以使空白不算作任何内容：

if (doc[i].textContent.trim() === '') { // it's empty
    doc[i].innerHTML = ' '; // add a non-breaking space as content.
}

但是，如果这是对齐表所要做的，那么您就走错了路。相反，使用一个

表

、

tr

和

td

标记，这些标记会自动执行（即使没有内容）。您还可以通过CSS实现这一点，同时保留您拥有的

div

标记

以下是CSS，它带来了表格样式对齐：

.invoiceTable {
    display:table;
    width:100%;
}
.titles2, .row {
    display:table-row;
}
.invoice-qty, .invoice-loc, .invoice-cus, .invoice-id, .invoice-ais, .invoice-items {
    display:table-cell;
    border:1px solid grey;
}

---

问题是，您试图使用

getElementById

，结果是

getElementsByName

返回一个

节点列表集合

var doc = document.getElementsByClassName('invoice-ais');

重要提示：HTML可以包含如下表示空格的实体

。因此，您需要了解属性

textContent

和jQuery函数

.text（）

您正在使用jQuery，所以请这样做：

$（文档）.ready（函数（）{
$（'.invoice ais'）。每个（函数（）{
//重要提示，这里是比较HTML。请阅读有关函数的信息。text（）
如果（$（this.html（）.trim（）=''）{
控制台日志（“空”）；
}
});
});

数量
Loc
项目
股票
项目ID
2loc
[努米特斯]
[仓库位置]
[项目名称]
[仓库/海关]
[id]
[仓库/走道]
添加空格并不能解决对齐问题，只能解决对齐问题。这听起来像是CSS的工作，应用固定的最小宽度，最大宽度和类似的，无论你想要什么。您可能应该只使用标记而不使用数据创建一个测试页面，然后使用CSS使其看起来像您喜欢的样子。然后添加数据并增强CSS以适应最大宽度或滚动等。我已经格式化了您的代码John，您可以查看，以了解有关如何格式化问题的更多详细信息。如果需要的话，你也可以使用它。非常感谢你给我指出了一个我从来都不知道的地方。我会在以后的作品中使用它。对不起，我的作品帖子太乱了。但是，作品想要检查HTML，你能提一下吗？i、 e:HTML实体
。感谢您的详细回复。代码很有用，我也会尝试CSS，看看是否更好。这可能是一个愚蠢的问题，但我是否有理由避免使用javascript/jQuery来处理这类内容？唯一的问题是，试图通过添加空格来对齐内容是不可靠的，因为这在很大程度上取决于字体属性。即使它在一个浏览器中对齐，也可能不在另一个浏览器中对齐。即使在相同的情况下，只要你改变缩放级别，它也可能会失真。有没有任何答案最终符合你的需要？如果是这样的话，你能吗？那真是一种享受，非常感谢。非常感谢。