如果内部没有图像，请删除owl-item

Question

我在下面使用owlCarousel进行HTML。因为我使用ajax来显示这个HTML内容，所以由于某些原因我无法处理哪个项目没有图像。

<div class="popular">
   <div class="item"><div class='item_inside'><img src="../img/p1.png"></div></div>
   <div class="item"><div class='item_inside'><!--No Image--></div></div>
   <div class="item"><div class='item_inside'><img src="../img/p2.png"></div></div>
   <div class="item"><div class='item_inside'><img src="../img/p3.png"></div></div>
</div>

我想删除哪个项目没有图像，然后我在下面使用script但它似乎删除所有项目。

$owl = $(".popular");
$owl.on('initialized.owl.carousel', function(event){ 
    $('.item_inside').each(function(){
        if ($(this).find('img').length) {

        }else{
            $(this).closest('.owl-item').remove();
        }
    });
});
$owl.owlCarousel(
});

如果我添加它是在window.load内部它不能很好地工作。有时，它会触发，而不是在Firefox中工作。

Update1：​​我的Ajax函数调用就像这样。

$('.loadcontent').each(function(){
   ajaxfire();
   //this will append to popular section
}).promise().done(function(){ 
   $owl = $('.popular');
   $owl.on('initialized.owl.carousel', function(event) {
    $(this).find('.item_inside:empty').each(function(idx, ele) {
        console.log('removed --> ' + $(this).closest('.owl-item').html());
        $(ele).closest('.owl-item').remove();
    });
   });
   $owl.owlCarousel();
   $owl.owlCarousel('update');
});

有什么建议吗？谢谢。

Answer 1

根据你的html，正确的选择器是:empty。

你需要使用dom ready event。

$(function () {
  ...put your code here....
})

$owl = $(".popular");
$owl.on('initialized.owl.carousel', function (event) {
    $(this).find('.item_inside:empty').each(function (idx, ele) {
        console.log('removed --> ' + $(this).closest('.owl-item').html());
        $(ele).closest('.owl-item').remove();
    });
});
$owl.owlCarousel();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="popular">
    <div class="item">
        <div class='item_inside'><img src="https://dummyimage.com/100x100/000/fff&text=1"></div>
    </div>
    <div class="item">
        <div class='item_inside'><!--No Image--></div>
    </div>
    <div class="item">
        <div class='item_inside'><img src="https://dummyimage.com/100x100/000/fff&text=3"></div>
    </div>
    <div class="item">
        <div class='item_inside'><img src="https://dummyimage.com/100x100/000/fff&text=4"></div>
    </div>
</div>