We Keep Coding

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. 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. I'm a JavaScript newbie and would appreciate any help.
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">Learn More</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 photo credit.</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">Learn More</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">Learn More</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>
<img src="http://www.someurl.com/images/icons/icon-chevron-left-slider.svg">
<img src="http://www.someurl.com/images/icons/icon-chevron-right-slider.svg">
<p class="slider-pagination"></p>
</div>
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.
You tried to target all the div with "popper" class. However, the div with "popper" and "photo-credit" are on the same level. Why not targeting their parent div instead?
Try this code. It's been tested (Link to 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)
Try a CSS only solution.
When you render your DOM elements. Add a class to "popper" div if the content of "photo-credit" is empty.
<div class="popper hide">
// img
</div>
Then in your CSS, add
.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.
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">Learn More</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 photo credit.</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">Learn More</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">Learn More</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>

angularjs expand & collapse issue

I am new in angularjs and currently i'm facing this issue.
Problem
when i clicked on any of the node, all the nodes will be expanded or collapsed.
For example : (Before clicking on the node)
After clicking on the node
Code
<div class="item">Data Visualization</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> AGV Mileage Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> Board Temperature Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> Laser Sensor Output Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
<div class= "item">
<i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> Battery Current Vs Timestamp</strong></i>
<div ng-show="collapsed">
<div id ="agvmileage">
<div class = "horizon">
<canvas width="960" height="120">
<script src="/static/js/frontend/cubi-agv.js"></script>
</div>
</div>
</div>
</div>
And if possible, how can i declare the "data visualization" as parent node and
others as child node then perform expand and collapse.
Please enlighten me on this, thanks in advance.

Each item needs to have its own separate collapsed state. For example:
Item 1
<i ng-model="collapsedMileage" ng-click="collapsedMileage = !collapsedMileage">
<strong>AGV Mileage Vs Timestamp</strong>
</i>
<div ng-show="collapsedMileage">
<!-- the rest of your template -->
</div>
Item 2
<i ng-model="collapsedLaser" ng-click="collapsedLaser = !collapsedLaser">
<strong>Laser Sensor Output Vs Timestamp</strong>
</i>
<div ng-show="collapsedLaser ">
<!-- the rest of your template -->
</div>
Item 3
<i ng-model="collapsedBattery" ng-click="collapsedBattery = !collapsedBattery">
<strong>Battery Current Vs Timestamp</strong>
</i>
<div ng-show="collapsedBattery">
<!-- the rest of your template -->
</div>

.append value of input text to <canvas> isnt displaying the output of .append('<p>' + value + '</p>')

I have a jsfiddle here: https://jsfiddle.net/gemcodedigitalmarketing/zn5yLwh3/
What I want is the text in the customText input to be appended to the canvas. Though I am unsure as to why this is not working.
It works when I tried yesterday to append td and tr to a table. But maybe because its a canvas it needs a different way of adding text?
not sure... either way i would apprecaite help.
$('#addText').click(function() {
var value = $('#customText').val();
$('canvas').append('<p>' + value + '</p>');
});
This is my jquery at the bottom of the page
<div class="assets">
<h3>Assets</h3>
<div class="text">
<h4>Text</h4>
<input id="customText" type="text">
<button id="addText" class="btn btn-default">Add Text</button>
<p></p>
</div>
<div class="image">
<h4>Images</h4>
<ul class="list-unstyled">
<!-- List of images here -->
<!-- <li><img src="images/sample.jpeg" class="img-rounded" /></li> -->
</ul>
</div>
<!-- canvas -->
<div class="canvas col-sm-8 col-md-8 col-lg-8">
<div class="block">
<!-- Add images and texts to here -->
</div>
</div>
This is the relevant html.
Hope that gives you guys enough to go on...

In your case canvas is not an element but a class.
This is from your fiddle:
<!-- canvas -->
<div class="canvas col-sm-8 col-md-8 col-lg-8">
<div class="block">
<!-- Add images and texts to here -->
</div>
</div>
So you have to use it in the selector as:
$('.canvas')
Don't forget the dot.

Change href value according to child

I want to change the href value according to the child background-image value but when I change the background-image value than all href take a same value according to first div.
<div class="row margin-bottom-20">
<div class="col-md-3 margin-bottom-20">
<a href="" class="over">
<div class="fill bg-change" style="background-image:url(images/cA4aKEIPQrerBnp1yGHv_IMG_9534-3-2.jpg);"></div>
</a>
</div><!-- /.col-md-3 col -->
<div class="col-md-3 margin-bottom-20">
<a href="" class="over">
<div class="fill bg-change" style="background-image:url(images/J3URHssSQyqifuJVcgKu_Wald.jpg);"></div>
</a>
</div><!-- /.col-md-3 col -->
<div class="col-md-3 margin-bottom-20">
<a href="" class="over">
<div class="fill bg-change" style="background-image:url(images/cA4aKEIPQrerBnp1yGHv_IMG_9534-3-2.jpg);"></div>
</a>
</div><!-- /.col-md-3 col -->
<div class="col-md-3 margin-bottom-20">
<a href="" class="over">
<div class="fill bg-change" style="background-image:url(images/J3URHssSQyqifuJVcgKu_Wald.jpg);"></div>
</a>
</div><!-- /.col-md-3 col -->
</div><!-- /.row -->
<script type="text/javascript">
$('.over').attr('href',function(e){
var bg_img = $('.fill').css("background-image");
bg_img = bg_img.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '');
return bg_img;
});
</script>

I'd suggest:
$('.over').prop('href', function () {
return $(this).find('.fill').css('background-image').replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '');
});
This iterates over each of the .over elements, and updates the href property to the processed string found in the background-image property.
It's worth noting that I haven't verified the results of the regular expression, and simply copied that part from your own posted code (given that it seems to work, or isn't mentioned in your question as not working).
References:
JavaScript:
String.prototype.replace().
jQuery:
prop().

Multiple Divs Show/Hide One at a time

I have a set of div's, What I want to do is when I click the read more button It shows the div "myContent" and hides the button for that particular container not all the divs with the same class name. and when I click the close button it hides the div (and because the button is there it should technically hide the button as well) and show the read more button again.
Whats happening right now is either all are showing or none are showing.
I am a newbie (using Jquery) Any help most appreciated.
The HTML
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
Thanks!

You can try this, Based on my understanding.
$('.read-more').click(function () {
$(this).closest('.member-content').next('.contentDiv').find('.myContent').show();
$(this).hide();
});
$('.close-more').click(function () {
$(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
$(this).closest('.myContent').hide();
});
DEMO

If I understand right here is what you are looking for :)
$('.read-more').click(function () {
$(this).closest('.member-content').next('.contentDiv').find('.myContent').fadeIn();
$(this).hide();
});
$('.close-more').click(function () {
$(this).closest('.contentDiv').prev('.member-content').find('.read-more').fadeIn();
$(this).closest('.myContent').hide();
});