I'm trying to get a class added on when a div is inside a certain parent div.
<div class="parent1">
<div class="child">
Content
</div>
</div>
.parent1 only exists on one page, while .child exists on others as well as this one.
So when .child is everywhere else, its color is red, but when it's inside .parent1 I want its color to be blue.
Here's what I'm using.
if ($('.child').parents('.parent1').length == 1) {
.addClass('.new-class');
}
I'm having no success with this. Can anyone help?
$(".parent1 .child").addClass("new-class");
Or
$(".parent1>.child").addClass("new-class");
If you want to make sure only first child will be populated with class:
<div class="parent1">
<div class="child"> <!-- will have also "new-class" class -->
<div class="child"> <!-- will NOT have "new-class" class -->
</div>
</div>
</div>
.addClass('.new-class'); adds that class to something. You forgot to tell jQuery what something is, and caused a syntax error instead (which your browser console would have told you about if you had it open). I believe you want this:
$('.parent1 .child').addClass('.new-class');
Well, since you did tag this as just javascript...
HTML
<div class="parent1" id="parent">
<div class="child" id="child">
Content
</div>
</div>
CSS
.has-parent {
color: blue;
}
Javascript
var child = document.getElementById('child');
var parent = document.getElementById('parent');
if (child.parentNode == parent) {
child.className += ' has-parent';
}
DEMO
You could also do this with just CSS:
.child
{
color: red;
}
.parent .child
{
color: blue;
}
So long as the .parent .child rule comes after the single .child rule, it will override the color with blue. No extra work to change the color. If you need this extra class for some other reason the The User 518469 's answer is probably best.
Related
I want buttons in a slider to get underlined when a slide is visible.
I think I need to check if a data attribute is true, and then add class.
When inspecting my webpage, I find this in properties > dataset: DOMStringMap > isactiveslide: "true"
I need to check if a slide has isactiveslide: "true" (or even data-isactiveslide: "true") and then add class.
I think I am close and have tried these two codes:
jQuery(function () {
if (jQuery('menu1').attr('isactiveslide') === true) {
jQuery(this).find("#test1").addClass("underline");
}
})
and
jQuery('menu1').each(function(){
if(jQuery(this).attr('isactiveslide')==true())
jQuery('#test1').addClass('underline');
})
EDIT (added after some great answers and questions)
And here is the section, where the data attribute "isactiveslide" occurs, copied from the page:
<rs-slide data-key="rs-1898" data-title="WORKS" data-in="o:0;" data-out="a:false;" class="menus works1" id="works1" data-originalindex="2" data-origindex="1" data-description="" data-sba="" data-scroll-based="false" style="overflow: hidden; height: 100%; width: 100%; z-index: 20; opacity: 1; visibility: inherit;" data-owidth="300" data-oheight="200" data-rspausetimeronce="0" data-isactiveslide="true"><
So, the next slide which is not yet shown has data-isactiveslide="false". I reckon, identifying "true" is how I can add class.
EDIT May 4th - I think I am close now, but it still does not work.
jQuery('#slide1[data-isactiveslide="true"]')("#slide1-btn").addClass('.underline');
any help is very appreciated!
Can be easily done by css:
You need to find the class applied on the active slide and button
rs-slide.menus[data-isactiveslide="true"] .button-class-name-here{
text-decoration:underline!important;
}
or
Find which slider you are using and on the slide change event of that slider apply the class on the button for styling.
Try this code:
var $ = document.querySelectorAll.bind(document) //No need for jquery - simply import the function
$(".menu1[data-is-active-slide]").forEach((el, index) => {
$("#test1")[index].classList.add('underline');
$("#test1")[index].innerText = "Selected!";
console.log(1);
})
<div class="menu1" data-is-active-slide='true'>1</div>
<div id="test1"></div>
<div class="menu1" data-is-active-slide='false'>2</div>
<div id="test1"></div>
<div class="menu1">3</div>
<div class="menu2" data-is-active-slide='false'>4</div>
<div class="menu2">5</div>
<div class="menu1" data-is-active-slide>6</div>
<div id="test1"></div>
<div class="menu2">7</div>
<div class="menu1 menu2" data-is-active-slide="true">8</div>
<div id="test1"></div>
<div class="menu1 menu2">9</div>
The beginning declaration of $ is simply defining it since I did not import jQuery.
The next part is where the 'fun' begins. I used $(".menu1[data-is-active-slide]") to select all elements with class menu1 and with the property that data-is-active-slide is present. Then, I simply defined an action inside the function, for the sake of demonstrating that it works.
I would like to hide the col12 class.but only col12 under the content-zone class because i have it in other places that i don't want top hide it. I have tried the following, but it does not work:
.content-zone.col12 {
display: none;
}
my code is :
<div class="content-zone">
<div class="col12">
</div>
</div>
If anyone can advise how I can selectively set a class attribute, I would appreciate it.
You are missing a space between the two class definitions.
.content-zone .col12
This will tell it to look for content-zone where col12 is a child n levels deep.
However, what you're currently telling it, is to look for an element with both classes set on the same element aka:
<div class="content-zone col12">
As you can see here, when using a space it will match all col12 within a content-zone no matter the depth:
.content-zone .col12 {
display: none;
}
<div class="content-zone">
<div class="col12">Inside div 1</div>
<div>
<div class="col12">Inside div 2</div>
</div>
</div>
<div class="col12">Outside div</div>
For an immediate child use an > instead of a space. This will match the element only if it is a immediate child of content-zone. As you can see here the second col12 is ignore because it isn't a immediate child of content-zone:
.content-zone > .col12 {
display: none;
}
<div class="content-zone">
<div class="col12">Inside div 1</div>
<div>
<div class="col12">Inside div 2</div>
</div>
</div>
<div class="col12">Outside div</div>
In html page am having an div-reportControlPanel as below . I have included another div-reportControlPanel1 as same with different id .
<div id="reportControlPanel" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>
<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>
Here Am show/hide the div's based on url am triggering .
if(prptName == "css.prpt")
{
alert("if");
document.getElementById("reportControlPanel").style.display = 'none';
document.getElementById("reportControlPanel1").style.display = 'block';
}
But as am using same sub Div-promptPanel under two different div my content is not loading properly . promptPanel is pentaho system used div. I am trying to have an another div to modify some css for my prpt.
Thanks.
To reiterate what Moishe said to you already: id are meant to be unique. You currently have two promptPanel id's, which means the second one will likely never be called. Now, you could use javascript, but with minimal knowledge of what your code looks like you could use a simple hash url + some basic css.
$(document).ready(function() {
$('a').click(function() {
$('#url').html($(this).prop('href'));
});
});
div.pentaho-rounded-panel-bottom-lr {
display: none;
}
div.pentaho-rounded-panel-bottom-lr .pentaho-rounded-panel-bottom-lr {
display: block;
}
:target {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="url"></div>
"Open" panel 1
"Open" panel 2
<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
this is some text in the first control panel.
</div>
</div>
<div id="reportControlPanel2" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
this is some text in the second control panel
</div>
</div>
Ok, so listen. I got something like this:
<div class="theinsideofclass" style="theinsideofstyle" ...></div>
<div class="theinsideofclass" style="theinsideofstyle" ...></div>
<div class="theinsideofclass" style="theinsideofstyle" ...></div>
<div class="theinsideofclass" style="theinsideofstyle" ...></div>
And they are dynamically changed(each time in different time) and I don't have any control of the source code.
The thing is, I want simply override the theinsideofstyle, but all my attempts are failed. I tried with the !important; but it didn't go. Isn't it suppose to override the inline css? Anyway, what are my options here? Obviously simple JS won't help me here as the entire divs are changed/replaced each time with the same code.
Just shoot with any idea, folks... Perhaps it will navigate for some solution.
You could write some JS that is executed once the entire page is loaded, with all resources loaded, etc:
function load()
{
var els = document.getElementsByClassName("theinsideofclass");
for(var i = 0; i < els.length; i++) {
els[i].removeAttribute("style");
}
}
window.onload = load;
.theinsideofclass {
color: green;
}
<div class="theinsideofclass" style="color: red;">
My inline style is color: black
</div>
<div class="theinsideofclass" style="color: red;">
My inline style is color: black
</div>
<div class="theinsideofclass" style="color: red;">
My inline style is color: black
</div>
As you can see, without the JS the inline style (font color of red) would normally override the external CSS style (green). However, my JS is removing the style attribute from the elements with the class of theinsideofclass so you can style with normal CSS WITHOUT using !important (I never use !important unless all my other options are exhausted).
Hey you could wrap the elements in a div and loop through them + add a custom class which you could then use to define style to these divs.
PLEASE NOTE: I assume by your question that the css-class is also dynamic/changing and you have no control of it.
HTML:
<div id="outerdiv">
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
</div>
JS:
var children = document.getElementById('outerdiv').children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
child.classList.add('myclass'); // this will add the class "myclass" to all the children divs inside the outerdiv
}
CSS:
.myclass {
background-color: red !important; // which ever style you want to overwrite
}
You could even go as far as removing the style attribute from the div with:
child.removeAttribute('style');
This way you won't need to use the !important in your css.
EDIT:
Based on OP's comment.
You could also try wrapping all these divs in an outer div, if you can control where they are rendered:
<div id="outerdiv">
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
</div>
Then in your css:
#outerdiv > div {
background-color: red !important;
}
Hi you can set style attribute to blank like below:
jQuery
$(document).ready(function(){
$('.theinsideofclass').attr('style','');
});
Kinda working demo here : https://jsfiddle.net/nm77md0L/ , https://jsfiddle.net/nm77md0L/1/
Since divs are generated on the fly and recreated when style attribute gets removed, try using setProperty on its CSSStyleDeclaration with third argument set to important.
//document.getElementsByClassName("theinsideofclass")[0].setAttribute('style', 'color: purple !important'); // recreates div
document.getElementsByClassName("theinsideofclass")[0].style.setProperty('color', 'blue', 'important'); // maybe won't?
.theinsideofclass{color: green !important}
<div class="theinsideofclass" style="color: red !important">TXT</div>
I can't guarantee it will work since we can't see what causes the divs to get regenerated and how, but give it a try, maybe the code is recreated when style attribute changes directly.
I want to change a tag's style using class onclick (basically I want to change the class).
This is my HTML code:
<div class="menutext">Feedback</div>
I don't know what's wrong, why it's not working!
Also I would like to make this code using JQUERY, if not possible with javascript.
calling click event is better that inline javascript... readable and easy to debug...
try this
html
<div class="menutext">Feedback</div>
jquery
$('.menutext a').click(function(e){
e.preventDefault(); //to prevent the default behaviour of <a>
$(this).parent().removeClass('menutext').addClass('menutext2');
//parent() because i think you want to change the class of the div ...
});
You didn't write a jquery selector in your onclick-event.
<div class="menutext">
Feedback
</div>
This works:
<div class="menutext">Feedback</div>
As what I have understand on your question, this is what you want.
jquery
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
html
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
CSS
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
Try this using jQuery and remove the onclick attribute in link also:
$('div.menutext > a').click(function(){
$(this).parent().removeClass('menutext').addClass('menutext2');
});