在div中添加一个类来检查子项

Question

当某些子节点不存在时，我需要向div添加一个类，这会将标题向下移动。我知道这是重复的，因为我发现this。

最高投票的答案不起作用 - 它将这个类应用于两个标题，我不知道为什么。

请参阅下面的代码：

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>

我做错了什么？

Answer 1

您只想将该类应用于前面的.main-header。您当前的代码会将该类应用于所有 .main-header元素。

.prev()将选择前面的元素。在您的情况下，这将是.main-header元素。

＆＃13;

＆＃13;

// 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');
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会尝试这个（未经测试）：

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

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

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

Answer 3

您可以尝试使用next定位最接近导航但无链接的标题...

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;