Question

如果要为div添加一个类，我需要一些帮助。

<div class="large-6 columns check-Div">
  <div class="custom-table">
    <div class="text">
      <?php echo $latestimage; ?>
    </div>
    <div class="custom-table-box">
      <?php echo $table; ?>
    </div>
  </div><!-- end custom-table -->
</div>

if ($j(".large-6.columns.check-Div > .custom-table-box:contains('size-full')")) {
  $j('.large-6.columns.check-Div').addClass("hasImage");
}

上面的jQuery是将hasImage类添加到所有div中，但我只希望在包含图像的div时应用它。有没有办法单独做到这一点？还是由父母？我试过了，但我有点失落。

任何帮助都会很精彩！

Answer 1

CSS ：有选择器是您正在寻找的（此处为直接后代）

$('div:has(> img)').addClass("hasImage") //jquery way

或仅在css中（但这需要polyfill，因为它在第4级，当前是草稿）

div:has(> img) {
   border-color: 1px solid red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

JSfiddle 此处：https://jsfiddle.net/y6gtt2vg/1/

浏览器支持

关于CSS选择器兼容性

无论浏览器支持CSS选择器，api.jquery.com/category/selectors/中列出的所有选择器在作为jQuery函数的参数传递时都将返回正确的元素集。

https://jquery.com/browser-support/

Answer 2

您可以删除if语句并仅根据:has选择器添加类来执行此操作：

$j('.large-6.columns.check-Div:has(img)').addClass('hasImage');

Answer 3

您可以使用jquery执行此操作，无需添加条件

jQuery(".custom-table-box:has(img)").parents(".check-Div").addClass("hasImage");

Answer 4

为清楚起见，我添加了额外的背景颜色

＆＃13;

$(".custom-table").children("div").each(function(item,index) {
  $(this).has("img").css("background-color", "red"); // Comment it if not needed
  $(this).has("img").addClass("hasImage");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="large-6 columns check-Div">
    <div class="custom-table">
      <div class="text">
        xyz<img />
      </div>
      <div class="custom-table-box">
      abc
      </div>
    </div>
  </div>

＆＃13;

Answer 5

试试此代码

$('.large-6 .columns .check-Div div:has(img)').addClass('hasImage');

Answer 6

我认为你应该尝试使用id。

var text = "{time: 9.5, text: &quot;this&quot;},{time: 3, text: &quot;is&quot;},time: 5,text: &quot;so&quot;},{time: 7, text: &quot;cool&quot;}";

<div id="addImg" class="large-6 columns check-Div"> <div class="custom-table"> <div class="text"> <?php echo $latestimage; ?> </div> <div class="custom-table-box"> <?php echo $table; ?> </div> </div> </div>

仅将类添加到一个div

6 个答案: