Невозможно добавить к элементу поиска - PullRequest
Новая
       9

Невозможно добавить к элементу поиска

0 голосов
/ 07 января 2019

Я запускаю проверку, чтобы определить, является ли атрибут данных availability положительным или отрицательным. Если это не так, я нахожу этот конкретный .smallCatalogBlock и хочу добавить .soonOverlay поверх него.

Как и сейчас, элемент не добавляется к .smallCatalogBlock. У меня есть проверка console.log, чтобы убедиться, что условие выполняется успешно, с правильным количеством найденных элементов. HTML просто не добавляется.

Кто-нибудь видит, что я делаю не так? 

$('.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
  <div class="smallCatalogBlock" data-availability="Yes">
    <span class="smallCatalogTitle">A</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
    <span class="smallCatalogTitle">B</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
    <span class="smallCatalogTitle">C</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 07 января 2019

Это потому, что когда вы используете $(this), сам объект является элементом с классом .smallCatalogBlock. Поэтому, когда вы запускаете $(this).find('.smallCatalogBlock'), он пытается найти элемент с классом smallCatalogBlock WITHIN в элементе с классом smallCatalogBlock и завершается неудачей. Поскольку он не может найти, он не может добавить. Это должно работать, если вы просто делаете $(this).append(...).

...