We Keep Coding

jQuery in Wordpress - Hide parent div if it contains a specific other div

I'm trying to hide a slick slider section if it has no slides. I've tried tons of different options, like trying to use PHP and CSS, but I feel I'm closest to getting it to work with jQuery.
The HTML output structure is:
<div class="container-flex type-testimonials-container">
<div class="container">
<div class="container type-testimonials slick-initialized slick-slider">
<div class="slick-list draggable">
<div class="slick-track">
<div class="slick-slide">
SINGLE SLIDE CONTENT
</div>
<div class="slick-slide">
SINGLE SLIDE CONTENT
</div>
<div class="slick-slide">
SINGLE SLIDE CONTENT
</div>
</div>
</div>
</div>
</div>
</div>
So, I'm thinking I can use jQuery to hide the containing div (.type-testimonials-container) if the single slide div (.slick-slide) doesn't exists.
I have tried the following:
if(jQuery(".slick-slide").html().length)
{
jQuery(".type-testimonials-container").hide();
}
As well as lots of variations of that... I think it might be because the two divs aren't on the same level and one contains the other, but trying to find a parent/child way of doing is proving difficult... I'm not sure which way to go...
Any help would be massively appreciated!
EDIT*
I've also tried checking the parent and child relationship and trying to wait until the DOM has loaded, like this:
document.addEventListener("DOMContentLoaded", function(event) {
var parentDiv = document.getElementsByClassName("slick-track");
var childDiv = document.getElementsByClassName("slick-slide");
if (parentDiv.contains(childDiv))
{
alert("div DOES exist");
}
else{
alert("div DOES NOT exist");
}
});
But this just shows me the DOES NOT exist alert even though it does exist - Will this search the whole of the DOM for it? or do I need to provide the exact path of the div from body or something?

Why not just query for the length of the HTML collection of .slick-slide? JQ will still return an object if the target element doesn't exist, and the object will have a property length. Something like
if(jQuery(".slick-slide").length === 0) {
jQuery(".type-testimonials-container").hide();
}

I managed to do it this way:
jQuery(document).ready(function() {
if(jQuery('.slick-slide').length){
jQuery('.type-testimonials-container').show();
}
else
{
jQuery('.type-testimonials-container').hide();
}
});

Selecting only one div of entire css class in jQuery

my goal is to show an overlay on a div when that div is hovered on. The normal div is called .circleBase.type1 and the overlay is circleBase.overlay. I have multiple of these divs on my page. When I hover over one .cirlceBase.type1, overlays show on every .circleBase.type1. How do I prevent this?
Here is some code:
HTML
<div class="circleBase type1">
<p class="hidetext">Lorem ipsum</p>
<hr size="10">
<strong class="gray hidetext">gdroel</strong>
</div>
<div class="circleBase overlay">
<p class="date">11/12/14</p>
</div>
and jQuery
$(document).ready(function(){
$('.overlay').hide();
$('.date').hide();
$(".circleBase.type1").mouseenter(function(){
$(".overlay").fadeIn("fast");
$('.date').show();
$('.hidetext').hide();
});
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$('.date').hide();
$('.hidetext').show();
});
});

Use $(this) to get current element reference and do like this:
$(".circleBase.type1").mouseenter(function(){
$(this).next(".overlay").fadeIn("fast");
$(this).next(".overlay").find('.date').show();
$(this).find('.hidetext').hide();
});
and:
$(".overlay").mouseleave(function(){
$(this).fadeOut("fast");
$(this).find('.date').hide();
$(this).prev(".circleBase").find('.hidetext').show();
});

usually when I want to target something specific you just give it an ID.
ID's play better in JavaScript than classes.
If you had a specific container, using the container as your starting point is a good route as well
$('#container').find('.something.type1').doSomething();
This is much more efficient for jquery, because it only searches .something.type1 inside of #container.

Well I'm not sure exactly what you're looking to do, but it looks like you want to replace content in some kind of circle with a hover text, but with a fade. To do that you'll have to add some CSS and it would be best to change your HTML structure too.
The HTML should look like this:
<div class="circleContainer">
<div class="circleBase">
<p>Lorem ipsum</p>
<hr>
<strong class="gray">gdroel</strong>
</div>
<div class="overlay" style="display: none;">
<p class="date">11/12/14</p>
</div>
</div>
so your js can look like this:
$(function(){
$(".circleContainer").mouseenter(function(){
$(this).find(".overlay")
$(this).find('.circleBase').hide();
});
$(".circleContainer").mouseleave(function(){
$(this).find('.circleBase').show();
$(this).find(".overlay").hide();
});
});
Here's a working solution that includes some CSS to make it nice. Try taking it out and running it, you'll see the problems right away.

Trying to traverse the DOM so unique video will play when certain div is clicked

So, I have a requirement for dynamically generated content blocks on a page. These blocks have a thumbnail and when it is clicked, it should open a modal, and display an unique overlay window, as well as as the unique associated video.
I am trying to write some generic JavaScript that will traverse the DOM tree properly, so that when any particular thumbnail is clicked, a modal, the associated overlay, and the associated video will open.
Here is an example of what I have now (there are many of these, dynamically added):
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>
and after attempting to do a bunch of different things, I ended up trying to do something like this for the JavaScript, which doesn't work:
$(".thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest(".window").removeClass("hide").addClass("show");
$(this).closest(".video").removeClass("hide").addClass("show");
});
CSS is very basic:
.hide { display: none; }
.show { display: block; }
Trying to make the click function generic as possible so it would work on any .thumbnail that was clicked. I've also interchanged find(".window") and children(".window") but nothing happens. Any ideas on what I'm doing wrong? Thanks!

Depending on what you actually want your classes to be, I'd use this code:
$(".thumbnail").on("click", function () {
var $block = $(this).closest(".block");
$block.find(".window, .video").add("#modal").removeClass("hide").addClass("show");
});
DEMO: http://jsfiddle.net/gLMSF/ (using different, yet similar code)
It actually finds the right elements, based on the clicked .thumbnail. It finds its containing .block element, then looks at its descendants to find the .window and .video elements.
If you actually want to include . in your attributes, you need to escape them for jQuery selection.
As for styling, you should probably just have the styling be display: block; by default, and then toggle the hide class. It's less work, and makes more sense logically.

You have a huge issue with your class names in HTML:
<div class=".block">
it should be
<div class="block">
Your modal is the only one that has the class properly named. Your DOM traversals will not work because they are looking for "block" but it's called ".block"
So fix it all to this and you should find more success:
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>

Your code won't work because your selectors have periods (.) in your classes if that's actually what you want, you should try it like this:
$(".\\.thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest("\\.window").removeClass("hide").addClass("show");
$(this).closest("\\.video").removeClass("hide").addClass("show");
});
Otherwise just try removing the periods from the classes...
Also, you're using .closest() incorrectly, as it looks up through ancestors in the DOM tree...
You should change your code to:
$(".\\.thumbnail").on("click",function(){
$(this).next("\\.window").children(".video")
.addBack().add("#modal").removeClass("hide").addClass("show");
});

jquery double function each

I have the following block of HTML code more than once
<div id="page_1" class="page">
<div class="imageDetail_bg">
<img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/>
</div><!-- imageDetail-->
<div id="listThumbs">
<div id="thumbsContainer_1" class="thumbsContainer">
<div id="areaThumb" class="areaThumb">
<div id="posThumb_1" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="">
</div>
</div><!--areaThumb-->
<div id="areaThumb" class="areaThumb">
<div id="posThumb_2" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="" />
</div>
</div><!--areaThumb-->
...
...
...
</div><!--listThumbs-->
</div><!--page-->
and the following jQuery code:
$('.page').each(function(i) {
$('.areaThumb').each(function(j) {
$('.detail_img').eq(j).click(function(){
$('.car_detail').eq(i).attr('src', $(this).attr('src'));
});
});
});
What I want to do is: For each page there's a block of thumbs, and when I click in any thumb, the image in #car_detail is replaced by the image of the thumb I clicked. At this moment I can do this, BUT the #car_detail image is replaced in all pages. I'm not getting individually actions for each page. Every click make the action occurs in all pages.
Can anyone tell me what I'm doing wrong?
Thanks

You need not iterate through each element of the jquery selector result to bind a click event.
And you are missing a closing div for thumbsContainer div, add that before each .
Also if you have an element with id car_detail then you should use #car_detail instead of .car_detail
Working example # http://jsfiddle.net/2ZQ6b/
Try this:
$(".page .areaThumb .detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
If the .detail_img elements are being used for the car_detail image then you can simplify the above code to:
$(".detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});

You need to give context to your children nodes:
$('.page').each(function(i) {
$('.areaThumb', this).each(function(j) {
$('.detail_img', this).eq(j).click(function(){
$('.car_detail', this).eq(i).attr('src', $(this).attr('src'));
});
});
});
Every this is pointing to the current element given by the jquery function that called it.
[edit] Cybernate found a better way to do what you wanted to. My answer mostly explains why your code did not work as you wanted

I think you have the wrong approach about this,
You should just use cloning and you will be fine...
HTML
<div class="holder">Replace Me</div>
<div>
<div class="car"><img src="img1" /></div>
<div class="car"><img src="img2" /></div>
</div>
JS
$('.car').click(function(){//when you click the .car div or <img/>
var get_car = $(this).clone();//copy .car and clone it and it's children
$('.holder').html('').append(get_car);//put the clone to the holder div...
});
I think this is what you should be doing, simple and elegant... do not understand why you complicate as much :)

Show / Hiding Divs

After cobbling together a few questions I've managed to get this far to showing / hiding divs:
$(document).ready(function(){
$('.box').hide();
$('#categories').onMouseOver(function() {
$('.box').hide();
$('#div' + $(this).val()).show();
});
});
HTML:
<div id="categories">
<div id="btn-top20">Top 20 Villas</div>
<div id="btn-villaspec">Villa Specials</div>
<div id="btn-staffpicks">Our Staff Picks</div>
</div>
<div id="category-content">
<div id="divarea1" class="box">
Content 1
</div>
<div id="divarea2" class="box">
Content 2
</div>
<div id="divarea3" class="box">
Content 3
</div>
</div>
What am I missing?

This will work:
<div id="btn-top20" rel="area1">Top 20 Villas</div>
<div id="btn-villaspec" rel="area2">Villa Specials</div>
<div id="btn-staffpicks" rel="area3">Our Staff Picks</div>
with this code:
$(document).ready(function(){
$('.box').hide();
$('#categories div').mouseenter(function() {
$('.box').hide();
$('#div' + $(this).attr('rel')).show();
});
});
Corrections:
No such function onMouseHover.
Attached the event to every div, not the #categories parent, so this has the right context.
added rel for every div, because val is meaningless.
Working example: http://jsbin.com/ivuxo
You may also want to hide the div on mouse out, in wich case you can use hover:
$('#categories div').hover(
function() { //hover in
$('.box').hide();
$('#div' + $(this).attr('rel')).show();
}, function(){ //out
$('.box').hide();
});

Flexible, generic (and untested!) solution which works with any number of "tabbed" element groups. You just need to specify ".tab-handles a[href=#id_of_target_tab]" hierarchy. As a bonus, the selected tab is remembered between page loads.
$(function() { // Shortcut for $(document).ready()
$('.tab-handles a').mouseenter(function() {
// Trigger custom event 'hide' for sibling handles.
$(this).siblings().trigger('hide');
// Show current tab.
$($(this).attr('href')).show();
}).bind('hide', function() {
// Hide the corresponding tab on custom event 'hide'.
$($(this).attr('href')).hide();
}).each(function() {
// Show tab if its id is found in url as an anchor (or hash).
if (new RegExp($(this).attr('href') + '$')).test(window.location.href))
$(this).trigger('mouseenter');
});
})
Your page can contain any number of the following structure:
<ul class="tab-handles">
<li></li>
<li></li>
</ul>
<div>
<div id="top-villas"> Your tab content goes here. </div>
<div id="villa-specials"> ... </div>
</div>

onMouseOver isn't a valid jquery method, among other things.
I really recommend browsing with google chrome when you're looking to debug javascript, it's error console is very useful for not just determining errors like this, but also for pinpointing the location in the script that is throwing the error, which might be an advantage beyond Firebug in firefox.
(And you can always run firebug lite as well via the bookmarklet even while using chrome, as the firebug lite website will show: http://getfirebug.com/firebuglite)

I used this to toggle my divs:
html
<div class="content-item-news">..</div>
<div class="content-news-extra">...</div>
jquery
$(".content-item-news").click(function() {
$(this).next(".content-news-extra").slideToggle(100);
});

I know this has already had a decent answer and although this isn't jQuery/mooTools - I figured it was worth a mention:
Seven Ways To Hide An Element With Javascript:
http://www.dustindiaz.com/seven-togglers/
:)