Question

我有这个html结构：

<section>
      <div class="v-middle">
        <div class="row">
          <h5 class="heading">Heading goes here</h5>
         </div>
      </div>
    </section>

我需要添加类＆＃34; newClass＆＃34;当 h5 具有 .heading 类时，为标记。

我尝试了以下但是它没有工作，我不知道为什么：

 $('.heading').parent('section').addClass('newClass');

样本

https://fiddle.jshell.net/4smhxoL6/1/

Answer 1

.parent查看直接父级，该父级不是section，而是div。你想要closest：

$('.heading').closest('section').addClass('newClass');

https://fiddle.jshell.net/4smhxoL6/2/

Answer 2

您可以使用closest()代替parent() .parent匹配直接父级。 closest匹配父亲section检测

 $('.heading').closest('section').addClass('newClass');

section {
  width:100%;
  height: 200px;
}

.newClass {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
      <div class="v-middle">
        <div class="row">
          <h5 class="heading">Heading goes here</h5>
         </div>
      </div>
    </section>

Answer 3

将父级更改为父级。

$('.heading').parents('section').addClass('newClass');

或

您可以使用

$('.heading').closest('section').addClass('newClass');

工作小提琴：https://fiddle.jshell.net/1y3ejtjz/

Answer 4

所有发布的答案都遗忘了一件事：

我需要将类“newClass”添加到父段标记时 h5有.heading class 。

仅当newClass元素具有<h5>类时才应用

heading。

这段代码可以解决问题。

var heading = $('.heading');

if (heading.length && heading.is('h5')) {
    heading.closest('section').addClass('newClass');
}

https://jsfiddle.net/4yo72hhd/

Answer 5

尝试parent方法，而不是parentsUntil方法。有关详情，请参阅jQuery Traversing - Ancestors

$('.heading').parentsUntil('section').addClass('newClass');

<强>演示：

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    section {
      width: 100%;
      height: 200px;
    }
    
    .newClass {
      background: red;
    }
  </style>
</head>

<body>

  <section>
    <div class="v-middle">
      <div class="row">
        <h5 class="heading">Heading goes here</h5>
      </div>
    </div>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    $('.heading').parentsUntil('section').addClass('newClass');
  </script>
</body>

</html>

＆＃13;

希望它可以帮助你。

Answer 6

您可以将以下代码用于具有.heading类的特定h5。因为如果这个标题类在其他元素中可用，这将保护您。

$('h5.heading').closest('section').addClass('newClass')

如果子级具有特定类，如何将类添加到父级

6 个答案: