如果没有找到一个Div中的类，在之前插入一个Div？答案

【问题标题】：If a Class Within a Div is Not Found, Insert a Div Before?如果没有找到一个Div中的类，在之前插入一个Div？
【发布时间】：2018-07-26 14:50:34
【问题描述】：

我想显示一个 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>

【问题讨论】：

ID 必须是唯一的
为什么不使用 CSS？ .content:empty { content: “no entries to display”; }

标签： javascript jquery html performance function

【解决方案1】：

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

另外，如上面的 cmets 所述，您不应该重复 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>

【讨论】：