javascript - 如果找不到 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>