Блог

как добавить класс к элементу, если у любого из дочерних элементов есть определенный класс в jquery?У меня есть markup

 <section class="cc01 cc01v0 cpad" >
   <div class="cc01w1 cwidth">
      <div class="ocode ocode-initialized">
         <div class="ocode-bttn" data-success="Copied to Clipboard" data-error="Error: Could not Copy">
            <div><a href="#copy">Copy</a></div>
            <div class="ocode-success">Copied to Clipboard</div>
            <div class="ocode-error">Error: Could not Copy</div>
         </div>
         <textarea readonly="readonly" tabindex="-1"></textarea>
      </div>
   </div>
</section>
  

. Я хочу addClass (‘проверить’) section element , есть ли у кого-либо из дочерних ocode элементов класс.Если у какого-либо из дочерних элементов есть класс ocode , я хочу добавить класс test в раздел.

https://jsbin.com/cajavivuru/edit?html ,js, вывод

 jQuery(document).ready(function($) {
    'use strict';
    console.log('cgggggggg11111');
        console.log('cgggggggg');
        $('.cc01.cc01v0.cpad').each(function () {
           console.log('===========');
          
          if($(this).children('ocode').hasClass('ocode')){
            $(this).addClass('test')
          }
           //console.log($(this).css({'background':'red'}))
        });

        
});
  

Наоборот, вы можете получить все элементы с .ocode помощью class, а с помощью $().parents() function вы можете получить все родительские элементы этого .ocode селектора.

И среди этих родительских элементов вы можете проверить их tagName и для соответствующего SECTION tagName добавить .test class .

 jQuery(document).ready(function($) {
  $(".ocode").each(function () {
    $(this).parents().each(function () {
      if($(this).prop("tagName") === "SECTION") {
        $(this).addClass("test");
      }
    });
  });
});  

 <section class="cc01 cc01v0 cpad">
  <div class="cc01w1 cwidth">
    <div class="ocode ocode-initialized">
      <div class="ocode-bttn" data-success="Copied to Clipboard" data-error="Error: Could not Copy">
        <div><a href="#copy">Copy</a></div>
        <div class="ocode-success">Copied to Clipboard</div>
        <div class="ocode-error">Error: Could not Copy</div>
      </div>
      <textarea readonly="readonly" tabindex="-1"></textarea>
    </div>
  </div>
</section>

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