javascript - 检查元素是否没有带有 jquery 的子元素

Question

我想检查元素是否没有设置父元素 display:none 属性的子元素。

但是我的 js 没有按预期工作，我的错误在哪里？

$(document).ready(function(){
  if (!$('#detay-main-carousel').children('.carousel-inner').length>1) {
     $('#detay-main-carousel').hide();
  }
});

<div id="detay-main-carousel" style="background:turquoise;">
  <div class="carousel-inner">
    This is the slider.....
  </div>
</div>

<div id="detay-main-carousel" style="background:yellow;">
    This is the slider.....
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

ID detay-main-carousel是重复的。

还有 ! ..children('.carousel-inner').length > 1应该是:

! ..children('.carousel-inner').length或者 children('.carousel-inner').length < 1或者 children('.carousel-inner').length === 0

$(document).ready(function(){
  $('.detay-main-carousel').each(function () {
    if (!$(this).children('.carousel-inner').length) {
        $(this).hide();
    }
  })
});

<div class="detay-main-carousel" style="background:turquoise;">
  <div class="carousel-inner">
    This is the slider.....
  </div>
</div>

<div class="detay-main-carousel" style="background:yellow;">
    This is the slider.....
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>