Question

我正在检查以查看数据属性availability是还是否。如果不是，我正在查找特定的.smallCatalogBlock，并希望附加{{1} }。

截至目前，该元素尚未附加到.soonOverlay。我有一个console.log检查，以查看条件是否成功运行，并且是否具有正确数量的找到的元素。只是没有附加html。

有人看到我在做什么错吗？

.smallCatalogBlock

$('.smallCatalogBlock').each(function() {
  if ($(this).data('availability') === 'No') {
    $(this).find('.smallCatalogBlock').append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
    console.log("It should be working");
  }
});

.smallCatalogWrap {
	width: 100%;
	height: auto;
	margin: 60px 0;
}
.smallCatalogBlock {
	width: 25%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin: 20px auto;
	text-decoration: none;
}
.smallCatalogBlock img {
	width: 80%;
	height: auto;
	box-shadow: 10px 5px 5px rgba(0,0,0,.3);
	display: block;
	margin: 0px auto 15px auto;
}
.smallCatalogTitle {
	font-family: 'Nunito', sans-serif;
	color: #4d4d4d;
	font-size: 1.3rem;
	text-align: center;
	display: block;
	font-weight: 400;
}
.comingSoonSmall {
	position: relative;
}
.comingSoonSmall .soonOverlay {
	width: 80%;
	height: 100%;
	background: #b82222;
	opacity: .8;
	position: absolute;
	top: 0;
	margin: 0 10%;
}
.soonOverlayInner {
	position: relative;
	min-height: 350px;
}
.soonOverlayInner .dGw {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 2.5rem;
}

Answer 1

这是因为当您使用$(this)时，对象本身就是类.smallCatalogBlock的项目。因此，当您运行$(this).find('.smallCatalogBlock')时，它将尝试在类为smallCatalogBlock的元素中找到类为smallCatalogBlock的元素，并且会失败。由于找不到，因此无法追加。如果您只做$(this).append(...)，它应该可以工作。

无法追加到查找元素

1 个答案: