使用 jQuery 格式化父元素的 CSS

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()執行此.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

您需要像下面這樣包含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>

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

您應該嘗試使用 addClass 方法。

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

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