I am using javascript to inject a few DOM elements into the page. I am able to inject a single DOM element and apply CSS style to it:
var $e = $('<div id="header"></div>');
$('body').append($e);
$e.css({
background: '#fbf7f7',
});
Problem: If I have nested elements within $e, how can I apply CSS styles to the parents and its children seperately?
var $e = $('<div id="header"><div class="header-content"><span class="title"></span></div></div>');
As you have applied class to div inside parent element you can simply create a style to that class header-content and apply it.
In order to apply styles dynamically you can simply add class for individual elements like this
$('#id-of-element').addClass("header-content");
you can also find elements inside parent element like the one below
$e.find('.header-content').css('background-color', '#ccc');
Hi you can add css to any element using .css() method... Try the following example. I have added a div inside $e and applied different style... the thing is to use the id or class of the child inside parent div...
var $e = $('<div id="header"><div id="child"></div></div>');
$('body').append($e);
$e.css({
background: '#fbf7f7',
});
$('#child').css("background", "red");
To expand on my comments: if you need to access children regardless of any id or class, then just use $e.children().
Related
Above I have three banner elements that I want to mark as unread if they are clicked. I structured each banner so that they have a span element within a nested div as shown with the image below (the red dot comes from the span element):
My javascript for this function is the following code:
I am trying to add a class ".read-dot" to the ".dot" span element that will hide it. I would like to add this class to the ".dot" span element that is inside the div that the user would click on. Any help would be appreciated.
I tried accessing the this.$(".dot) to access the dot element of the current object that triggered the event, but I now see this syntax is incorrect. I am new to jQuery which is why I tried this; I also could not find the page most relevant to my question on the API doc.
First, you have to remove click accessibility for the child.
$('div.banner > *').css('pointer-events', 'none');
And then, you can use the jquery selector for the .unread class to remove the class and replace .dot with .read-dot
$('.unread').click((e) => {
let clickedElm = e.target;
clickedElm.classList.remove('unread');
clickedElm.querySelector('span').classList.remove('dot');
clickedElm.querySelector('span').classList.add('read-dot');
})
I was trying to searchengine for this, but I'm not sure how to call it exactly.
I can change the style of my div elements successfuly, for example:
$(document).ready($('div.element1').css("float", "left"));
This will successfully change all the elements of class element1 that exist. However, the new (after above is executed) elements will still spawn with old option of float: right;. What is my best/simplest option for permanently changing the style of this div? I can inject it manually after the element is created but that feels wrong to be honest.
It is better if you don't add inline style using .css() method, but instead just add/remove classes having your style, so create a class for all those elements' style.
If the newly created elements have the class you define, then they will have the style too.
Optionally, you can do this:
$(document).on('change or_other_event','your_selectors', function(){
// your code
});
If the new elements have classes element1, element2 ..., you would need something like this:
$(document).on('change','div[class*="element"]', function(){
// your code
});
Just create a new class on your css and then add that class to your new element
.newElement{
color:red//example style
}
$("<div>",{class:'newElement'})
Your code:
$(document).ready($('div.element1').css("float", "left"));
is equivalent to:
var element = $('div.element1').css("float", "left");
$(document).ready(element);
This means any un-drawn elements will not be affected. Instead use:
$(document).ready(function() {
$('div.element1').css("float", "left");
});
The above code ensures changes are made once the page has loaded.
I use Rangy.js to apply styles to inline elements like this:
rangy.createClassApplier(className, { elementTagName: tagName });
Applier.toggleSelection();
How would I go about applying a class to the parents of any selected items? For instance, I want to add a class to any paragraph that is a parent of a selection -
Currently I have a script that adds a display:block to the target element by matching the ID.
document.getElementById(id).style.display = 'block';
...But i now want to change that so that it add's the style or class to a child DIV element.
You can grab your child element by using this javascript code:
document.getElementById(id)[0].style.display = 'block';
It's just like accessing a certain item inside of an array.
Use jQuery's .css() to add some style and .addClass() to add any class to the target element.
Reference :
CSS
addClass
Hope this helps.
In my div i have a child div of class "someClass". I want to access that child by classname, not id.
EDIT: Only in this particular div, not all the other divs with same classname
var childOfNamedDiv = $('#namedDiv>.someClass')
var div = $('.someClass');
See jQuery Selectors.
just use the class selector:
$('div>.someClass').toggle()
if you already have a reference to the jquery object that is the parent of the div that you want to find:
var parent = $("#someDiv"); // this is the div that you may alread have found earlier
var child = parent.children(".someClass");