如果猫头鹰物品内部没有图像，请将其删除

Question

我在下面使用猫头鹰轮播进行 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(
});

如果我添加它在窗口内，加载它不能很好地工作。有时，它会触发并且在 Firefox 中不起作用。

更新1：我的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 事件。

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