javascript - 工作 jQuery 代码在条件内不起作用

Question

我想设置一个元素内容，以防它为空。
html.erb代码如下:

<div class="comments-section">
  <% if micropost.comments.any? %>
    <ol id="comments_micropost-<%= micropost.id %>">
      <% micropost.comments.each do |comment| %>
        <%= render comment %>
      <% end %>
    </ol>
  <% end %>
</div>

我要设置内容的元素是<div class="comments-section"> 。当微博还没有评论时，其内容为空。
我在 create.js.erb 中使用 javascript 处理评论的创建操作:我写了两行代码，取决于是否micropost.comments为零或不为零:

案例一:微博尚未评论( micropost.comments.any? 为 false):

$('#micropost-<%= @micropost.id %>').find('.comments-section').html("<%= escape_javascript(render partial: 'comments/first_comment') %>");

案例2:微博已有评论(micropost.comments.any?为真):

var comments = $('ol#comments_micropost-<%= @micropost.id %>');
comments.append('<%= escape_javascript(render partial: @comment) %>');

两段代码单独使用时都可以工作。但是，当在以下条件中与案例 2 一起插入时，案例 1 的代码不起作用:

if (comments == null) {
  $('#micropost-<%= @micropost.id %>').find('.comments-section').html("<%= escape_javascript(render partial: 'comments/comments') %>");
} 
else {
  comments.append('<%= escape_javascript(render partial: @comment) %>');
};

我不明白为什么 if (comments == null)该代码没有被执行。我也尝试过 if (comments == undefined)并与 if (!comments)没有任何改进。
相反，else部分条件已成功执行。

Answer 1

JavaScript 将不存在的 DOM 元素视为 length = 0 的对象。可以通过使用 Web 浏览器控制台、编写 DOM 元素并检查控制台输出来验证这一点。选择没有评论的微博(例如 id = 304 的微博):micropost.comments.any? 将为 false，并且 div.comments-section 中的所有内容code> 不会出现在文档中。打开控制台并在提示符下编写以下代码:

$('ol#comments_micropost-304');

输出将是:

1. [] 在基于 Chromium 的浏览器中
2. 对象 { length: 0, prevObject: Object, context: HTMLDocument → 1, 选择器: "ol#comments_micropost-304"} 在 Firefox 中

原始 if 语句不起作用，因为该对象不为 null 并且 length = 0。因此，正确的 if 语句是: if (comments.length == 0)