Mam taką strukturę html:

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

I muszę dodać klasę "Newclass" do Sekcji Dominującej Tag, gdy H5 ma .heading klasa.

Próbowałem następujących, ale to nie zadziałało i nie wiem dlaczego:

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

DEMO

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

0
Nesta 27 czerwiec 2017, 16:16

6 odpowiedzi

Najlepsza odpowiedź

.parent patrzy na natychmiastowy rodzic, który nie jest section, ale div. Chcesz closest:

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

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

1
tymeJV 27 czerwiec 2017, 13:19

Możesz użyć poniżej kodu dla określonych H5 z klasą .heading. Ponieważ jeśli ta klasa nagłówka dostępna w innym elemencie, będzie Cię ochroni.

$('h5.heading').closest('section').addClass('newClass')
1
Umashankar 27 czerwiec 2017, 14:09

Wszystkie opublikowane odpowiedzi zapomną o 1 rzecz:

I muszę dodać klasę "Newclass" do tagu sekcji nadrzędnej , gdy H5 ma klasę .heading .

newClass powinien być stosowany tylko wtedy, gdy element <h5> ma heading.

Ten kod powinien zrobić sztuczkę.

var heading = $('.heading');

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

https://jsfiddle.net/4yo72HHD/

1
TripleDeal 27 czerwiec 2017, 13:35

Zamiast metody parent, spróbuj metody parentsUntil Traversing - przodkowie

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

Demo :

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

Mam nadzieję, że to może ci pomóc.

1
YinchaoOnline 27 czerwiec 2017, 13:34

Zmień rodzic do rodziców.

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

Lub

Możesz użyć

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

Porozmawiający skrzypce: https://fiddle.jshell.net/1y3ejtjz/

1
Gokulan P H 27 czerwiec 2017, 13:24

Możesz użyć closest() zamiast parent() .Parent pasujące do natychmiastowego rodzica. closest pasujące do rodzica najpierw 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>
1
prasanth 27 czerwiec 2017, 13:19