如果一个元素的子元素为空,则向该元素的另一个子元素添加类

时间:2018-12-19 21:41:24

标签: jquery

我有一个包含两个div的元素。

这是html:

<div class="row">
    <div class="col-md-9">
        text...
    </div>
    <div class="col-md-3">
        <div class="image_right">
        </div>
    </div>
</div>

如果“ image_right”为空,我需要更改col-md-9的类或CSS

这是代码

$('.row').each(function() {
if ( $.trim( $(this).children.text() ).length == 0 ) {
    if ( $(this).children().length == 0 ) {
        $(this).text('');
         $(this).remove();

         $(this).sibling.css('float', 'left');


    }
}
});

但它不起作用。

3 个答案:

答案 0 :(得分:0)

此代码将完成您想做的事情。

$('.row').children().each(function(i,e) {
  let $e = $(e);
  if ( $e.find(".image_right").length !== 0 ) {
    $e.siblings().css('background-color', 'purple');
    $e.remove();
  }
}); 
.row{
  background-color:pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-9">
        text...
    </div>
    <div class="col-md-3">
        <div class="image_right">
        </div>
    </div>
</div>

答案 1 :(得分:0)

使用filter()siblings()

$('.image_right').filter(function() {
  return !this.textContent.trim()
}).parent().siblings().css('color', 'red')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-9">
    text...
  </div>
  <div class="col-md-3">
    <div class="image_right">
    </div>
  </div>
</div>

答案 2 :(得分:0)

我写了以下jquery,但也许会更简单:

   $('.image_right').each(function() {
   if ( $.trim( $(this).text() ).length == 0 ) {
       if ( $(this).children().length == 0 ) {
           $(this).text('');
            $(this).remove(); // remove empty paragraphs
       }
   }
});  
$('.col-md-3').each(function() {
   if ( $.trim( $(this).text() ).length == 0 ) {
       if ( $(this).children().length == 0 ) {
        $(this).text('');
         $(this).remove(); // remove empty paragraphs
    }
}
});  

$('.views-row .row').each(function() {
if(!$(this).children('.col-md-3').length) {

$(this).find('.col-md-9').addClass('no_image');
 }
   });