I have the following HTML structure, I want to add a class to the last <div> which contains the <p> tag but only when it exists.
<div id="view">
<div class="login">
</div>
<div>
<p>Add a class to this parent DIV</p>
</div>
</div>
Any suggestions?
Simple snippet:
if($('#view div:last p').length)
$('#view div:last').addClass('myClass');
Will get all the divs that has a p tag
p = $('#view div p');
if (p.length) {
$(p[p.length - 1]).addClass("largerText");
}
Here is the fiddle
Yes Roaster given right answer and this is the fiddle for it. http://jsfiddle.net/sameerast/qhsXM/
<div id="view">
<div class="login">
</div>
<div>
<p>Add a class to this parent DIV</p>
</div>
</div>
if($('#view div:last p').length){
$('#view div:last').addClass('myClass');
}
.myClass {
border:red 1px solid;
}
Related
I'm new to css and I have some auto generated snippet as following,
<div id="display">
<div>
<div>
<p>red</p>
</div>
<div>
<p>not red</p>
</div>
</div>
</div>
I have attached auto generated element into display div (first div) through javascript snippet.
I want to select only first paragraph using CSS.
I tried following CSS also tried nth-child(1) ,
p:first-child {
color:red;
}
But it's selecting both of the values.
Both <p> elements are the first child of their respective parent DIVs. You want the <p> that's the child of the first child DIV.
div:first-child > p {
color: red;
}
<div id="display">
<div>
<div>
<p>red</p>
</div>
<div>
<p>not red</p>
</div>
</div>
</div>
you can use first-of-type also to achieve that goal
div:first-of-type > p {
color: red;
}
<div id="display">
<div>
<div>
<p>red</p>
</div>
<div>
<p>not red</p>
</div>
</div>
</div>
#display > div > div:first-child > p{ color: red }
<div class="b" >
<h1>Hello</h1>
<div class="a">
<p class="ABC">A........Z</p> //this could be present in some pages
</div>
</div>
This is a piece of code in which I want to add css properties to div with class "b" if <p> contains class="ABC".
How to do it?
$("p.ABC").parents("div.b").css('background-color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b" >
<h1>Hello</h1>
<div class="a">
<p class="ABC">A........Z</p> //this could be present in some pages
</div>
</div>
$("p.ABC") this finds all the p elements has the class ABC.
parents("div.b") finds the first parent that is div and has class named b of the selected element.
css() adds the styles you want. You can also use addClass() method to add predefined class.
Please check if this helps
if($( "p" ).hasClass( "ABC" )) {
// if you want to add a class with many properties, then
$( "div.b" ).addClass( "yourClass" );
// if you want to add one property to existing class then the below statement
$( "div.b" ).css( "attribute-name", value );
}
You can add all the css properties in "yourClass"
if($("p").hasClass("ABC")) {
$("div.b").css("color", "blue");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b" >
<h1>Hello</h1>
<div class="a">
<p class="ABC">A........Z</p> //this could be present in some pages
</div>
</div>
Please check the code snippet.
I added a css property color as blue to the class 'b' if 'p' has 'ABC'. its working
One method is to look directly at <p class="ABC"> and check if it has a class using hasClass(). Then you can traverse upwards to find the nearest element with class="b"
Something like this:
var elementToModify = $('p').hasClass('ABC').closest('.b');
elementToModify.prop('property', newValue);
Checkout these to further understand their use:
prop()
closest()
You can use $("p.ABC") to find all <p> with class ABC then .closest(".b") to find the parent div with class b then .css() to change css properties.
I recommend using .addClass() / .removeClass() rather than change css directly, but this helps you find the parent.
This also allows you to have multiple div class='b' in your html and it will only apply to the one with ABC
$("p.ABC").closest(".b").css("background-color", "pink");
.b+.b {
border-top: 1px solid black;
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b">
<h1>Hello</h1>
<div class="a">
<p class="ABC">A........Z</p> //this could be present in some pages
</div>
</div>
<div class="b">
<h1>Hello</h1>
<div class="a">
<p class="DEF">ABC not present</p>
</div>
</div>
You can also turn it around using :has
$(".b:has(.ABC)").css("background-color", "pink")
which states: select all .b that has at least one child that has class .ABC, which is nearer to your concept of: add css to div with class "b" if <p> contains class="ABC"
So it depends on which way you want to work it.
$(".b:has(.ABC)").css("background-color", "pink")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b">
<h1>Hello</h1>
<div class="a">
<p class="ABC">A........Z</p> //this could be present in some pages
</div>
</div>
<div class="b">
<h1>Hello</h1>
<div class="a">
<p class="DEF">ABC not present</p>
</div>
</div>
Will you please tell me that how i hide mother .secondchild if parent has child class.
Here is the code
HTML code
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
Here is my script but not working
if ($(".parent").hasClass("child")) {
$('.mother .secondchild').hide()
}
since your parent div has no class called child, your script won't give the desired output.
try this
if($('.parent').children().hasClass('child')){
$('.mother .secondchild').hide();
}
DEMO HERE
EDIT
Based on OP's Comment hidden the div in the button click.
Html
<button id="btnClick">
Click Me
</button>
JS
$('body').on('click','#btnClick','',function(){
if($('.parent').children().hasClass('child')){
$('.mother .secondchild').hide();
}
});
UPDATED DEMO
$(function(){
$("body").on("click",".click",function(){
if ($(".parent ").children("div.child")) {
$('.mother .secondchild').hide()
}
})
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
<button class="click">
button
</button>
</body>
</html>
Do this work without any if condition
$(".parent:has(.child)").next().find(".secondchild").hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
You just change "hasclass" to "has", then it works.
if($('.parent').has('.child')){
$('.mother .secondchild').hide();
}
Hello i am quite struggling with a problem. The structure is like :-
<div class="parent" >
<div class="child1" >
</div>
<div class="childToBeKeptLast" >
</div>
</div>
After insertion of new child
<div class="parent" >
<div class="child1" >
</div>
<div class="child2" >
</div>
<div class="childToBeKeptLast" >
</div>
</div>
Thus I always want to keep my child with class "childToBeKeptLast" as last child no matter how many insertion take place in the parent div.How to achieve this by css or jquery ??
Any help will be appreciated ... Thank you ...
Try to use .insertBefore() at this context,
$('.child2').insertBefore('.parent .childToBeKeptLast');
So the above code would insert the new children before of the element which is having the class childToBeKeptLast and which is the descendant of the element with the class parent
For Info, in CSS with young browser, the flex model can help you to keep one last .. seen at screen:DEMO
BASIC CSS needed :
.parent {
display:flex;
flex-direction:column;
}
.childToBeKeptLast {
order:1;
}
/* for demo, make some content*/
div:before {
content:attr(class);
}
The :not() selector works too if you want somehow filter some browsers
:not(.childToBeKeptLast) {
order:-1;/* puts anything that has not this class up in front */
}
HTML of demo:
<div class="parent" >
<div class="child1" >
</div>
<div class="childToBeKeptLast" >
</div>
<div class="child1" >
</div>
<div class="whatever clss wich is not meant to be last seen" >
</div>
<div class="child1" >
</div>
<div class="child1" >
</div>
</div>
You also use:
$('.childToBeKeptLast').before('<div class="child2"></div>');
I can't figure out how to remove class from a parent element, basically I have a <audio> tag (from now on referred to as this) which is inside a div with class="playing" how can I remove this class?
tried this, but than understood that it will remove class from audio element not it's parent div:
this.removeClass("playing");
this.parent().removeClass("playing");
$(this).closest('div').removeClass("playing")
or
$(this).closest('div.playing').removeClass('playing')
this.closest('div[class=playing]').removeClass("playing");
JSfiddle Demo
<div class="bold">
<p id="p1" class="blue under">Hello</p>
</div>
<div class="bold">
<p id="p2" class="blue under highlight">and</p>
</div>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
$("#p1").parent().removeClass("bold");
$("input").keyup(function () {
$(this).parent().removeClass('bg-red');
});
.bg-red {
background-color: red;
}
.h-50 {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="h-5 bg-red">
<h3>Add text inside input will remove "bg-red" class from parent div</h3>
<input placeholder="Enter anything" type="text">
</div>