[英]Hide parent div class if child div class does not have content when there are multiple parent divs with the same class name
I have a slider where some of the images in the slider can have an optional photo- credit containing text or link in a popper. 我有一个滑块,滑块中的某些图像可以具有可选的照片信用,其中包含文本或弹出窗口中的链接。 I would like to iterate over all of the popper instances and if all of the p tags in the .photo-credit p class are empty, then hide only that instance of the parent popper. 我想遍历所有popper实例,如果.photo-credit p类中的所有p标签都为空,则仅隐藏父popper的该实例。 I've tried to piece together a solution from some other posts, but have not been able to get it to work. 我曾尝试从其他一些帖子中整理出一个解决方案,但未能使其正常工作。 The code I have does not hide a popper if all p tags are empty for that popper. 如果所有p标签都为空,则我拥有的代码不会隐藏该popper。 I'm a JavaScript newbie and would appreciate any help. 我是JavaScript新手,不胜感激。
HTML HTML
<div class="slider-wrapper">
<!--Required Root Element-->
<div class="slider">
<!--Required List Element-->
<div class="slider-list">
<div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /></div>
<div class="slider-content-container">
<h1>B LIne: The Place to Be</h1>
<div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p><p><a href="http://www.someurl.com">A photo credit</a>.</p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>July 4th: You missed it!</h1>
<div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div><div class="slider-item">
<div class="slider-image-container"><img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /></div>
<div class="slider-content-container">
<h1>Festival coming Aug. 31st!</h1>
<div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div>
</div>
<div class="popper">
<img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" />
</div>
<div class="photo-credit hide">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
<a href="#" class="slider-control-prev"><img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a>
<a href="#" class="slider-control-next"><img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a>
<p class="slider-pagination"></p>
</div>
JavaScript JavaScript的
$('.popper').each(function () {
//var $thisPopper = $(this);
var hasContent = 0;
$('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent > 0){
//$thisPopper.hide();
$(this).hide();
}
});
You were on the right direction. 您的方向正确。 However a couple mistakes in your javascript. 但是,您的JavaScript中有一些错误。 You tried to target all the div with "popper" class. 您尝试使用“ popper”类定位所有div。 However, the div with "popper" and "photo-credit" are on the same level. 但是,具有“ popper”和“ photo-credit”的div处于同一级别。 Why not targeting their parent div instead? 为什么不针对他们的父div?
Try this code. 试试这个代码。 It's been tested ( Link to jsfiddle ) 已经过测试( 链接到jsfiddle )
$('.slider-item').each(function () {
var thisSilerItem = $(this);
var hasContent = 0;
thisSilerItem.find('.photo-credit p').each(function () {
if($(this).html().length > 0) {
hasContent++;
}
});
if(hasContent <= 0){
thisSilerItem.find('.popper').hide();
}
});
Edit : Bonus: If your page has a large amount of sliders, this jquery solution will cause some UX issues ("jumpy" div on/after page load) 编辑 :奖励:如果您的页面上有大量的滑块,则此jquery解决方案将导致一些UX问题(页面加载时/加载后“ jumpy” div)
Try a CSS only solution. 尝试仅CSS解决方案。
When you render your DOM elements. 渲染DOM元素时。 Add a class to "popper" div if the content of "photo-credit" is empty. 如果“ photo-credit”的内容为空,则将一个类添加到“ popper” div中。
<div class="popper hide">
// img
</div>
Then in your CSS, add 然后在您的CSS中,添加
.popper.hide { display: none; }
It's hard to fully gather what you want to do, but if I understand correctly... 很难完全收集您想做的事情,但是如果我理解正确的话...
$('.popper').each(function () {
var photoCredit = $(this).find(".photo-credit p")
if ( $(photoCredit).is(':empty') ){
$(this).hide();
}
});
It's worth pointing out that CSS4 developers are working on a 'has' selector but as of July 2017 there is no support for any browser just yet. 值得指出的是,CSS4开发人员正在使用“具有”选择器,但是截至2017年7月,尚不支持任何浏览器。
It is expected to work in the following manner: 预期将以以下方式工作:
.popper:has(> p:empty) { display: none }
I hope this helps... :) 我希望这有帮助... :)
You can check this code. 您可以检查此代码。
$.each($('.popper'), function (index, popper) {
var isEmptry = true;
$.each($(popper).next('.photo-credit').children(), function (index, ptag) {
if ($.trim($(ptag).html()) != '')
isEmptry = false;
});
if (isEmptry)
$(popper).hide();
});
Working code 工作代码
$.each($('.popper'), function (index, popper) { var isEmptry = true; $.each($(popper).next('.photo-credit').children(), function (index, ptag) { if ($.trim($(ptag).html()) != '') isEmptry = false; }); if (isEmptry) $(popper).hide(); });
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <div class="slider-wrapper"> <!--Required Root Element--> <div class="slider"> <!--Required List Element--> <div class="slider-list"> <div class="slider-item"> <div class="slider-image-container"> <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/image1.jpg" /> </div> <div class="slider-content-container"> <h1>B LIne: The Place to Be</h1> <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> </div> <div class="popper"> <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> </div> <div class="photo-credit hide"> <p> <p><a href="http://www.someurl.com">A photo credit</a>.</p> </p> <p></p> </div> </div> <div class="slider-item"> <div class="slider-image-container"> <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /> </div> <div class="slider-content-container"> <h1>July 4th: You missed it!</h1> <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> </div> <div class="popper"> <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> </div> <div class="photo-credit hide"> <p></p> <p></p> </div> </div> <div class="slider-item"> <div class="slider-image-container"> <img class="slider-image" src="http://www.someurl.com/Images/Homepage Images/Slider/anotherimage.jpg" /> </div> <div class="slider-content-container"> <h1>Festival coming Aug. 31st!</h1> <div class="learn-more"><a href="http://www.someurl.com">Learn More</a></div> </div> <div class="popper"> <img data-toggle="popover" class="photo-credit-icon" src="http://www.someurl.com/icon-photography.svg" alt="photo credit" /> </div> <div class="photo-credit hide"> <p></p> <p></p> </div> </div> </div> </div> <a href="#" class="slider-control-prev"> <img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg"></a> <a href="#" class="slider-control-next"> <img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg"></a> <p class="slider-pagination"></p> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.