How to change all classname elements of specific classname - javascript

How to change all classname elements of specific classname?
I mean, let's say I have 3 divs with classes "MyClass", and i want to change their classnames to "notMyClass" in JavaScript, how to do it?
<div class="MyClass">
</div>
<div class="MyClass">
</div>
<div class="MyClass">
</div>
<!--TO-->
<div class="notMyClass">
</div>
<div class="notMyClass">
</div>
<div class="notMyClass">
</div>
I know that it's very easy by calling element by it's id, but how to do it by it's classname?

Select all elements with the MyClass class with querySelectorAll, then loop through each element (with NodeList.forEach) and use classList.replace:
document.querySelectorAll('.MyClass').forEach(e => e.classList.replace('MyClass', 'notMyClass'))
.notMyClass{
background-color:green;
}
<div class="MyClass">A</div><div class="MyClass">B</div><div class="MyClass">C</div>
<!--TO-->
<div class="notMyClass">D</div><div class="notMyClass">E</div><div class="notMyClass">F</div>

Use querySelectorAll method:
Array.from(document.querySelectorAll('.MyClass')).forEach(elem => {
elem.className = 'otherClass';
});
Note that I used Array.from, because querySelectorAll returns a NodeList, not an array.

Related

Javascript changing a specific element in a div

So I have something like this in my html:
<div id="basket">
<div id="item">Apple</div>
</div>
<div id="basket">
<div id="item">Orange</div>
</div>
<div id="basket">
<div id="item">Banana</div>
</div>
// And so on
How would I be able to change the innerHTML of each 'item' div individually?
For example, how would I change the div that says 'banana' to something else?
As already mentioned within the comments, an ID has to be unique so you have to change them to classes.
Then to solve your issue, you can use querySelectorAll to select all elements with the class item. Then you sue the forEach-loop and check the innerHTML of every Element. if it matches "Banana" you can rewrite the innerHTML (should use textContent though for security reasons):
document.querySelectorAll('.item').forEach(el => {
if (el.textContent == 'Banana') {
el.textContent = 'The Minions ate the Banana';
}
})
<div class="basket">
<div class="item">Apple</div>
</div>
<div class="basket">
<div class="item">Orange</div>
</div>
<div class="basket">
<div class="item">Banana</div>
</div>

CSS for a div and its children excluding one particular child and that child's children

I have nested blocks like this, I don't know how many nested block there :
<div class="my-class">
...
<div class="exclude-my-class">
<div>
</div>
</div>
<div>
<div>
</div>
</div>
...
</div>
I want to write styles for "my-class" and its children but exclude "exclude-my-class" and its children using css. I don't know in which level can be "exclude-my-class" classes
Something like
.my-class:not(.exclude-my-class),
.my-class *:not(.exclude-my-class, .exclude-my-class *){
//styles
}
How do I achieve this?
The question has been asked before.
Borrowing from this answer, you can’t. The :not() pseudo-class in Selectors level 3 is very limited by itself. You can only pass a single simple selector as an argument to :not(). This means you can pass only any one of these at a time:
Universal selector (*), optionally with a namespace
Type selector (a, div, span, ul, li, etc), optionally with a namespace
Attribute selector ([att], [att=val], etc), optionally with a namespace
Class selector (.class)
ID selector (#id)
Pseudo-class (:pseudo-class)
HTMl:
<div class="my-class">
<div class="exclude-my-class">
<div >
Skipped
</div>
</div>
<div>
<div>
not skipped
</div>
</div>
<div class="exclude-my-class">
<div >
skipped
</div>
<div >
skipped
</div>
</div>
<div>
<div>
not skipped
</div>
<div>
not skipped
</div>
</div>
<div>
<div>
not skipped
</div>
</div>
<div>
<div>
not skipped
</div>
</div>
</div>
CSS: Select all the children of the children of my-class but not children if the direct child of my-class is exclude my class.
.my-class div:not(.exclude-my-class) div{
background-color: red;
}
CSS: Select all the children of my class but not children with exclude-my-class.
.my-class > div:not(.exclude-my-class){
background-color: red;
}
Use below code
.my-class : not(.exclude-my-class)

Element or its ancestors are member of a class

How can I check whether an element or any of its ancestors are member of a specific class? As fare as I know, .hasClass only checks for the element itself.
<div class="myClass">
<div>
<div id='myElement'>
</div>
</div>
</div>
<div id = 'notMyElement'>
</div>
$('myElement').anyAncestorHasClass('myClass') == true;
$('notMyElement').anyAncestorHasClass('myClass') == false;
You can check the length of jQuery object returned by .closest() method.
From Documentation:
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
if($('#myElement').closest('.myClass').length) {
document.write('Class Exists');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="myClass">
<div>
<div id='myElement'>
</div>
</div>
</div>
<div id='notMyElement'>
</div>

jQuery: If all children have same class

How do I check if all children, or all selectors, have same class?
The class is unknown...
<script>
$(document).ready(function() {
var symbols = $("div:first-child").attr("class");
if ($("div").hasClass(symbols).length == 3) {
console.log("same");
};
});
</script>
<div class="john"></div>
<div class="john"></div>
<div class="john"></div>
This doesn't work... :-/
$("div").not('.john').length
If any of the divs are not class john this will find them, then you check the length and if it's not zero then some exist.
This is a problem:
$("div:first-child").attr("class")
It will return the entire class string, but the div could have more than one class, and all will be returned. But when you check with either my code or hasClass you can only send in one class, not a bunch together.
HTML:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
jQuery:
if ($(".parent").children().length == $(".parent").children(".child").length) {
alert("wooo all the things have teh same class");
}

Get elements just 1 level below the current element by javascript

I need to access the DOM tree and get the elements just 1 level below the current element.
Read the following code:
<div id="node">
<div id="a">
<div id="aa">
<div id="ab">
<div id="aba"></div>
</div>
</div>
</div>
<div id="b">
<div id="ba">
<div id="bb">
<div id="bba"></div>
</div>
</div>
</div>
<div id="c">
<div id="ca">
<div id="cb">
<div id="cba"></div>
</div>
</div>
</div>
</div>
I want to get the 3 elements "a", "b", "c" under "node". What should I do?
var nodes = node.getElementsByTagName("div") <---- I get all the divs but not the 3 divs I need.
var nodes = node.childNodes; <---- works in IE, but FF contains Text Node
Does anyone know how to solve the problem?
You could use a function that rules out all non-element nodes:
function getChildNodes(node) {
var children = new Array();
for(var child in node.childNodes) {
if(node.childNodes[child].nodeType == 1) {
children.push(child);
}
}
return children;
}
I'd highly recommend you look at JQuery. The task you're looking to do is straightforward in pure Javascript, but if you're doing any additional DOM traversal, JQuery is going to save you countless hours of frustration. Not only that but it works across all browsers and has a very good "document ready" method.
Your problem solved with JQuery looks like:
$(document).ready(function() {
var children = $("#node").children();
});
It looks for any element with an id of "node" then returns its children. In this case, children is a JQuery collection that can be iterated over using a for loop. Additionally you could iterate over them using the each() command.
This is simplier than you think:
var nodes = node.querySelector("node > div");
Try this (late answer, but can be useful for others):
var list;
list=document.getElementById("node").querySelectorAll("#node>div");
Universal selectors can do the trick:
var subNodes = document.querySelectorAll("#node > *");
Query parts:
#node is unique container selector
> next slector should be applied only on childs
* universal selector that match every tag but not text
Can I use universal selector
In my opinion the easiest way to do this is to add a class name to the
first level child nodes:
<div id="node">
<div id="a" class="level_1">
<div id="aa">
<div id="ab">
<div id="aba"></div>
</div>
</div>
</div>
<div id="b" class="level_1">
<div id="ba">
<div id="bb">
<div id="bba"></div>
</div>
</div>
</div>
<div id="c" class="level_1">
<div id="ca">
<div id="cb">
<div id="cba"></div>
</div>
</div>
</div>
</div>
and then to use the method getElementsByClassName, so in this case:
document.getElementById('node').getElementsByClassName('level_1');
I think node.childNodes is the right place to start. You could (to make it work with FF too), test the nodeName (and possibly nodeType) of all child nodes you get, to skip text nodes.
Also you might have a look at some javascript library like prototype, which provide a lot of useful functions.
I've added some text so we can see that it is working, and JavaScript that will add "added!" to the bottom of each of the divs at the base:
var cDiv = document.querySelectorAll('body > div > div'), i;
for (i = 0; i < cDiv.length; i++)
{
cDiv[i].appendChild(document.createTextNode('added!'));
}
<div id="node">
<div id="a">a
<div id="aa">aa
<div id="ab">ab
<div id="aba">aba</div>
</div>
</div>
</div>
<div id="b">b
<div id="ba">ba
<div id="bb">bb
<div id="bba">bba</div>
</div>
</div>
</div>
<div id="c">c
<div id="ca">ca
<div id="cb">cb
<div id="cba">cba</div>
</div>
</div>
</div>
</div>

Categories