如果找不到Div中的类，请在之前插入Div？

Question

如果不包含其中的特定类，我希望显示另一个div .before()。虽然看起来很简单，但不知怎的，我无法让它工作......

以下是我迄今取得的进展摘要：

$('.container > #content').not('.entry', function() {
  $(this).before('<div class="noentry">No entries to display.</div>');
});

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

h1 {
  font-size: 22px;
  margin-top: 0;
}

.container {
  margin: 0 auto;
  max-width: 300px;
  border: 1px solid lightgrey;
  padding: 10px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <h1>Section With an Entry:</h1>
  <div id="content">
    <div class="entry">This is an entry.</div>
  </div>
</div>

<div class="container">
  <h1>Section Without an Entry:</h1>
  <div id="content"></div>
</div>

Answer 1

.not()方法无法正常工作。它只检查.entry类的直接对象。你需要搜索后代。请参阅下面的更新示例，您可以使用.find()。

另外，如上面的评论中所述，您不应该重复ID，因此我将您的content更改为了一个类。

$(function() {
  $('.container > .content').each(function() {
    if (!$(this).find(".entry").length) {
      $(this).before('<div class="noentry">No entries to display.</div>');
    }
  });
});

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

h1 {
  font-size: 22px;
  margin-top: 0;
}

.container {
  margin: 0 auto;
  max-width: 300px;
  border: 1px solid lightgrey;
  padding: 10px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <h1>Section With an Entry:</h1>
  <div class="content">
    <div class="entry">This is an entry.</div>
  </div>
</div>

<div class="container">
  <h1>Section Without an Entry:</h1>
  <div class="content"></div>
</div>