Question

我正在尝试更改div的背景（和其他样式），如果它有一个特定的孩子。我使用.length来检查特定的子节点是否存在，但即使它没有从jquery if语句中获取样式。我的HTML：

<div class="full-text-panel">
        <div class="main-wrap">
            <h1 class="home-h1">This is a header</h1>
            <a class="body-button">This is a button</a>
        </div><!--end main-wrap-->
    </div><!--end full-text-panel-->

我的jQuery：

            var fullText = $('.full-text-panel');
            var bodyButton = $('.body-button');

            if ( $(".full-text-panel .body-button").length > 0 ) {
                fullText.css("background", "red");
            } else {
                fullText.css("background", "blue");
            }

我认为这样可行，但两个fullText面板都采用了背景红色样式。我做错了什么？

Answer 1

$(function(){
  
  $('.full-text-panel:has(.body-button)').addClass('red');
  
  });

.full-text-panel{
  background:blue;
  }

.red{
  background:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="full-text-panel">
        <div class="main-wrap">
            <h1 class="home-h1">This is a header</h1>
            <a class="body-button">This is a button</a>
        </div><!--end main-wrap-->
    </div><!--end full-text-panel-->

<div class="full-text-panel">
        <div class="main-wrap">
            <h1 class="home-h1">This is a header</h1>
        </div><!--end main-wrap-->
    </div><!--end full-text-panel-->

Answer 2

在你的上下文中使用jquery中的每个进行迭代

$('.full-text-panel').each(function() {

     if($(this).find('a.body-button').length > 0){
         $(this).css("background", "red");
     }
    else{
        $(this).css("background", "blue");
      }

});

如果div具有特定的Child，则更改背景颜色

2 个答案: