仅将类添加到一个div

Question

I need some help adding a class to a div if is has an image to it.

<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");
}

The jQuery above is adding the hasImage class to all of the divs but I only want it to apply when there is a div that contains a image. Is there a way to do it singularly? Or by parent? I have tried but I'm a little lost.

Any help would be wonderful!

Answer 1

CSS :has selector is what you are looking for (here for a direct descendant)

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

or just in css (but this would require a polyfill , as its in Level 4, which is draft currently)

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

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

JSfiddle here: https://jsfiddle.net/y6gtt2vg/1/

---

Browser support

About CSS Selector Compatibility

Regardless of a browser's support of CSS selectors, all selectors listed at api.jquery.com/category/selectors/ will return the correct set of elements when passed as an argument of the jQuery function.

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

Answer 2

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

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

Answer 3

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

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

Answer 4

For clarity I have added additional background color

 $(".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"); }); 

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

Answer 5

试试这个代码

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

Answer 6

I think you should try using id.

<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><!-- end custom-table -->
                </div>

if ($j(".large-6.columns.check-Div > .custom-table-box:contains('size-full')")) { $j('#addImg').addClass(".hasImage");//also missing . for class }