将类添加到一个 div 并检查其是否有子元素。

Question

当某些子元素不存在时，我需要向一个div添加类来移动标题。我注意到这是一个重复的问题，因为我找到了这个。

最受欢迎的答案不起作用-它将类应用于两个标题，我不知道为什么。

请看下面的代码：

var linkCheck = $('.navigation').not(':has(.nav-link )');
if (linkCheck) {
  $(".main-header").addClass("no-links-header");
}

.no-links-header {
  color: red;
  margin-bottom: -80px;
}

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

<div class="main-header">
<h2>The Main Header</h2>
</div>

<div class="navigation">
  <a class="nav-link" href="#">A Link</a>
  <a class="nav-link" href="#">A Link</a>
  <a class="nav-link" href="#">A Link</a>
</div>


<div class="main-header">
<h2>Move this Header down</h2>
</div>

<div class="navigation">
</div>

我做错了什么？

- kawnah

---

"它将类应用于两个标题，我不知道为什么。" - 因为您有两个具有main-header类的元素？ - Scott Marcus

这是因为 $(".main-header") 选择了所有类名为 main-header 的元素，所以它将 no-links-header 类添加到了两个标题中。 - Scaramouche

Answer 1

你想将类仅应用于前面的.main-header。您当前的代码将把类应用于所有 .main-header元素。 .prev()将选择前一个元素。在您的情况下，它将是.main-header元素。

// A collection of .navigation elements that do not have children
let navs = $('.navigation').not(':has(.nav-link )');
 
// Loop through your collection
navs.each(function() {
  
  // Find the preceding .main-header element and add the class
  $(this).prev().addClass('no-links-header');
})

.no-links-header {
  color: red;
  margin-bottom: -80px;
}

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

<div class="main-header">
<h2>The Main Header</h2>
</div>

<div class="navigation">
  <a class="nav-link" href="#">A Link</a>
  <a class="nav-link" href="#">A Link</a>
  <a class="nav-link" href="#">A Link</a>
</div>


<div class="main-header">
<h2>Move this Header down</h2>
</div>

<div class="navigation">
</div>

- Turnip

Answer 2

我会尝试这样做（未经测试）：

var linkCheck = $('.navigation').not(':has(.nav-link )');

$(linkCheck).addClass("no-links-header");

这样，该类应仅添加到与 linkCheck 选择器匹配的元素。

- nr1chiefrocka

---

这会将类添加到错误的元素上（.navigation 而不是 .main-header）。另外请注意，您可以在发布答案时使用“{ }”图标格式化代码。 - Lewis

你说得对，我误读了问题。在智能手机上回答问题时是否可以使用代码块？因为我唯一看到的选项是向我的答案添加图像。 - nr1chiefrocka

哦，我没注意到这个（我确定以前是可以的）。你可以通过在每行代码前添加4个空格来解决这个问题。 - Lewis

Answer 3

你可以尝试使用next来定位最接近没有链接的导航栏的标题...

$(".navigation").each(function(){
  if($(this).children(".nav-link").length > -1){
    $(this).next(".main-header").addClass("no-links-header");
  }
})

.no-links-header {
  color: red;
  margin-bottom: -80px;
}

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

<div class="main-header">
<h2>The Main Header</h2>
</div>

<div class="navigation">
  <a class="nav-link" href="#">A Link</a>
  <a class="nav-link" href="#">A Link</a>
  <a class="nav-link" href="#">A Link</a>
</div>


<div class="main-header">
<h2>Move this Header down</h2>
</div>

<div class="navigation">
</div>

- Lewis