CSS форматирование родительского элемента с jQuery

Question

Мне нужно отформатировать родительский элемент .card-body, если он содержит элемент класса .adrotate_widget. Я делаю это со следующим JavaScript:

  <script> 
     $(document).ready(function(){ 
       $('div:has(.adrotate_widgets)').css('padding', '0'); 
     }); 
  </script>

Вот код HTML:

<div class="card">
<div class="card-body">
    <aside id="adrotate_widgets-3" class="widget adrotate_widgets"></aside>
</div>

Но, к сожалению, я получаю сообщение об ошибке

"Ошибка типа: $ не является функцией"

и родительский элемент не изменен. Что я делаю не так?

Спасибо! Бернвард

Answer 1

Если вы хотите выбрать прямого родителя, вы можете сделать это с помощью .parent().

Пример:

$(function() {
  $(".adrotate_widgets").parent().css('padding', '0');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-body">
    <aside id="adrotate_widgets-3" class="widget adrotate_widgets"></aside>
  </div>
</div>

Вы также можете использовать селектор :parent.

Пример:

$(function() {
  $(".adrotate_widgets:parent").css('padding', '0');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-body">
    <aside id="adrotate_widgets-3" class="widget adrotate_widgets"></aside>
  </div>
</div>

Подробнее:

• https://api.jquery.com/parent-selector/
• https://api.jquery.com/parent/

Обновление

Это должно работать с jQuery v1.12.4 очень хорошо. Вы можете столкнуться с проблемами пространства имен, так что следите за этим.

jQuery(function($) {
  $(".adrotate_widgets:parent").css('padding', '0');
});

<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<div class="card">
  <div class="card-body">
    <aside id="adrotate_widgets-3" class="widget adrotate_widgets"></aside>
  </div>
</div>

Answer 2

Вы должны попробовать использовать метод addClass.

$('div:has(.adrotate_widgets)').addClass('zeroPadding');

<style type="text/css">
.zeroPadding { padding:0; background-color: yellow;}
</style>

Answer 3

При условии, что вы успешно включили библиотеку jquery в свой проект, например:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

будет работать что-то вроде следующего:

$(function() {
  $(".adrotate_widgets").closest('.card-body').css('padding', '0');
});

Answer 4

Вы должны включить Jquery library, как показано ниже.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 $(document).ready(function(){ 
       $('div:has(.adrotate_widgets)').css('padding', '0');
       console.log($(".card-body").css("padding")) 
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body">
    123
    <aside id="adrotate_widgets-3" class="widget adrotate_widgets"></aside>
</div>
</div>