3

当某些孩子不存在时，我需要向 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>

我究竟做错了什么？

4

3 回答 3

4

您只想将该类应用于前面的.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>

于 2018-04-24T15:26:05.087 回答
1

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

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

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

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

于 2018-04-24T15:37:43.203 回答
0

您可以尝试使用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>

于 2018-04-24T15:33:43.657 回答