How to hide parent div if first child is empty - javascript

I want to hide class "aa" if the first div element is empty in class "ca". Please guide me
My sample code:
<div class="aa">
<div class="ca">
<div></div>
<div class="cb"></div>
<div class="cc"></div>
</div>
<div>
Appreciate your response!

You can use children(":first") to get first child of div as
$(document).ready(function(){
if($('.ca').children(":first").text() == ""){
$('.aa').hide();
}
});
$(document).ready(function(){
if($('.ca').children(":first").text() == ""){
$('.aa').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="aa">
<div class="ca">
<div></div>
<div class="cb">A</div>
<div class="cc">B</div>
</div>
<div>

You can check to see if the first childNode of the .ca parent element has content, and then target .aa from there if it does not:
//If there is no content within the first div of the class="ca" div...
//choose between textContent and innerHTML below
//based on whether it is going to have any text or some HTML within (with possibly no text)
if (!document.querySelector('.ca').childNodes[0].innerHTML) {
//hide the class="aa" div
document.querySelector('.aa').style.display = 'none';
}

Related

I can't handle to select the correct div (using Jquery)

$(document).ready(function() {
$(".myClass").click(function () {
$(".myClass", $(this)).first().scrollIntoView({behavior: "smooth",block: "start"});
});
});
.myClass {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=myClass>I click on this div
</div>
<div class=otherClass>Some random text
</div>
<div>
<div class=otherClass>Some random text
</div>
<div>
<div class=myClass>I want to scroll to this div
</div>
Here is my problem, i have this pattern that repeats itself several times in my page. Div having the class "otherClass" are generated dynamically in variable quantity.
<div>
<div class=myClass>
</div>
</div>
<div>
<div class=otherClass>
</div>
</div>
<div>
<div class=otherClass>
</div>
</div>
<div>
<div class=myClass>
</div>
</div>
My goal is by clicking on a "myClass" div to scroll down the window (using scrollIntoView()) to the next div with the same class.
I added a click event on each "myClass" div but i can't manage to select the next one. I tried to add a context to my selector $(".myClass", $(this)) to search only after the clicked div but it doesn't work (always returning me the current div ?).
I also tried using next() to "move" to the next div but i'm struggling with the fact that there is an unknown numbers of "otherClass" div between them.
What am i doing wrong ?
Sorry if my explanation isn't clear and thank you for your help.
Up to your html structure .myClass doesn't have any next .myClass on its level .. See the next code
$('.myClass').on('click' , function(){
$(this)
.parent() // select the parent div
.nextAll('div:has(.myClass)') // select the next div which has .myClass in it
.first() // select just one div next
.find('.myClass') // find the .myClass in this div
.addClass('Next'); // add class to it
});
.Next{
background : red;
color : #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class=myClass>myClass</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=myClass>myClass</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=myClass>myClass</div>
</div>
Additional: if you need to reverse you'll need to use prevAll instead of nextAll and .last() instead of .first()
This will work no jQuery needed.
Here is the fiddle example: https://jsfiddle.net/e1xz74wj/
JS
let scrollToNext = 0;
const elements = document.querySelectorAll('.myClass');
document.getElementById('btn').addEventListener('click', () => {
++scrollToNext
if (scrollToNext < elements.length) {
elements[scrollToNext].scrollIntoView();
}
})
Explanation:
Increment the counter after clicking on the button to scroll to the desired element (finding element by specified className).
Each time a click occurs the counter is incremented by one hence the next element is selected. When the counter reaches the max amount of found elements it doesn't increment anymore.

Modify a DIV based on length of a text in another DIV using JQuery

I have a series of div's that are populated with an image, title & excerpt.
Many of the 'content' div's have a div with a two lined title, but I'd like for the 'excerpt' div to have a different class added if the title is one lined (24 characters or less).
I figured I'd have a jQuery function that runs through each '.content' div then an if statement compares the amount of characters in the '.contentTitle', if true then it would apply a class to the '.excerpt' div within the same parent .content div.
What I have below is not working. I'm wondering if its because both of the divs (.contentTitle / .contentExcerpt .excerpt) I'm using are children of the container div (.content)
$(".content").each(function(){
if($(".contentTitle").text().length < 22) {
$(".contentExcerpt .excerpt").addClass('TEST');
}
});
<div class="content">
<div class="contentImage"></div>
<div class="contentTitle"><?php the_title(); ?></div>
<div class="contentExcerpt">
<div class="excerpt">
<?php echo(get_the_excerpt()); ?>
</div>
</div>
</div>
When you are using the children of the container div (.content), you didn't check the children of the div whereas you check all other div matching $(".contentTitle").text().length < 22 when there is more than one .content parent div and when one of them is having the length >= 22, the condition will fail.
I have modified the code below to check the children of the parent div.
$(".content").each(function(){
var parent = $(this);
if(parent.find(".contentTitle").text().length < 22) {
parent.find(".contentExcerpt .excerpt").addClass('TEST');
}
});
.TEST {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="contentImage"></div>
<div class="contentTitle">12345678901234567890123</div>
<div class="contentExcerpt">
<div class="excerpt">
Test content
</div>
</div>
</div>
<div class="content">
<div class="contentImage"></div>
<div class="contentTitle">12345678901234567890</div>
<div class="contentExcerpt">
<div class="excerpt">
Test content
</div>
</div>
</div>
Note: If you replace your code above, you can see, this is not changing the color as one of matching div is having the length >= 22.

add a class to specific element by javascript and not repeat

this is sample code explain what i want:
<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
<div class="targetClass"></div>
</div>
<div id="someId">
<div class="someClass"></div>
</div>
this code for jquery:
var $newDiv = $("<div/>")
.addClass("targetClass")
$(".someClass").append($newDiv);
result is add a TargetClass in div number 3 and repeat same class in first and second div.
question is how i add class in the last div and not repeat it in another div.
Judging by your code, you want new div as a sibling of your .someClass div rather than its child.
Simply replace this line
$(".someClass").append($newDiv);
by
$( "div[id]:not(:has(.targetClass))" ).append($newDiv); //will append new div to all those divs which doesn't have child element with targetclass
var $newDiv = $("<div/>").addClass("targetClass");
$( "div[id]:not(:has(.targetClass))" ).append($newDiv);
Demo
Using .last() will select the last element you are searching for.
jQuery(".someClass").last().append($newDiv);
If you mean to add div with targetClass to a div with someId if it donot exists, you can use the find() function:
if($('#someId').find('.someClass').length == 0) {
var $newDiv = $("<div/>")
.addClass("targetClass")
$("#someId").append($newDiv);
}
I suppose you have unique IDs for parent divs as someId is not valid if it is the actual ID applied on multiple elements, this makes the markup invalid.
Use .last().parent() to put the element as a sibling element as they share same parent:
var $newDiv = $("<div/>")
.addClass("targetClass").html('dynamic target element.')
$(".someClass").last().parent().append($newDiv);
div{border:solid 1px red; margin:10px 0 0 0;}
div div{border:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someId-1">
<div class="someClass">some</div>
<div class="targetClass">target</div>
</div>
<div id="someId-2">
<div class="someClass">some</div>
<div class="targetClass">target</div>
</div>
<div id="someId-3">
<div class="someClass">here after this elem should add</div>
</div>

Reinsert position of the div

On some javascript condition, How to remove mynavbar and insert into main_table div
<div id="mynavbar" > <div>Some content</div> </div>
<div id="main_table"> </div>
<script>
if(condtion == 0)
{
How to remove mynavbar and insert into main_table div
}
</script>
You can just call .appendTo().
$('#mynavbar').appendTo('#main_table');
Reference: .appendTo()
if(condtion == 0)
{
$("#mynavbar").appendTo("#main_table");
}

Changing DIV color without giving an ID?

I have the following code :
<div id="wrapper">
<div style="width:500px;background-color:yellow;"> // this is a parent div
<div style="width:260px;">
Click me to color only the FIRST yellow div
</div>
</div>
<div style="width:500px;background-color:yellow;"> // this is a parent div
<div style="width:260px;">
Click me to color only the SECOND yellow div
</div>
</div>
</div>
Can I use jQuery to change the parent div's color without giving its ID or name?
Thanks
$("a").click(function(e){
e.preventDefault();
$(this).parent().parent().css("color", "green");
});
Try this:
$('a').click(function() {
$(this).parent().parent().css('backgroundColor', 'yellow');
return false;
});

Categories