Develop Reference

Apply .classList.add() to all divs that .startsWith("example") - No jQuery

I wish to do the following but am unsure on how to properly utilize the content targeted within .startsWith.
This is what I have:
var divClass = document.querySelector('div').getAttribute('class');
if (divClass.startsWith('example')){
divClass.classList.add('width', 'height');
}
as shown above, I have attempted to use classList.add() on divClass with no prevail. I believe this strategy is indeed incorrect, however, I believe something like the following is closer...
var divClass = document.querySelector('div').getAttribute('class');
if (divClass.startsWith("example")){
example.classList.add('width', 'height');
}
...Although I struggle to directly target example and use .classList.add() to apply classes to all divs with the example class.
If anyone has a solution to this It'd be greatly appreciated and I thank you in advance!
FYI - All solutions please be in Vanilla JavaScript (No jQuery)

You can use this selector getElementsByClassName
var list = document.getElementsByClassName("example");
for(var i=0;i<list.length;i++){
list[i].classList.add("mystyle");
}
for searching similar classes this solution works
var x = document.querySelectorAll('div');
var i;
for (i = 0; i < x.length; i++) {
if(x[i].classList.value.indexOf('example') > -1){
x[i].classList.add("mystyle");
}
}

Retrieve all the div with the classname starting with example and iterate over the node collection you've found
let divClass = document.querySelectorAll('div[class^="example"]');
[].forEach.call(divClass, function(div) {
/* do something on div */
});

querySelector only gets one element, so you are only selecting the first div on the page and working with that. To get a list of elements, use querySelectorAll.
In jQuery you're able to call $('div').addClass('example') and you don't have to care whether there is one div or a lot, because jQuery handles looping through all of them for you. Without jQuery you have to do the iteration yourself:
var divs = document.querySelectorAll('div');
for ( var i = 0; i < divs.length; i++ ) {
divs[ i ].classList.add('example')
}
Or
document.querySelectorAll('div').forEach(div => div.classList.add('example'))
document.querySelectorAll( selector ) is very similar to $( selector ), but document.querySelector( selector ) is more like $( selector ).first().

Best way to show all hidden divs in javascript

I have several hidden divs inside large div, they can be shown one by one or all at once
It looks like this:
<div class="maindiv">
Print "<a href=javascript:show()>Click here to show all</a>
Show/hide div1
<div id="div1" style="display:none;">.....</div>
Show/hide div2
<div id="div2" style="display:none;">.....</div>
....
</div>
showhide() function is ok showing/hiding given div, show() works too but like this:
function show(){
div1.style.display="block";
div2.style.display="block";
...
}
so if I'll have 100 divs I'll have to enter it there 100 times
so my question is, how can I find all hidden divs in div with class maindiv and show em other way than enumerate? Or is the way I do ok?

Try using a generic css class name that is defined similarly:
.hidden{
display:none;
}
Then all you have to do is select the elements that have that class and remove that class. Assuming you are using at least IE9 you can try:
var divs = document.getElementsByClassName("hidden");
for(var i = 0; i < divs.length; i++)
{
divs[i].className = ""; //assuming you only have that class set else you will need to do a search and replace
}
If you have to support earlier versions there are other methods that will work to gather all the divs you need such as document.getElementsByTagName("div")

LIVE DEMO
Try this:
JQuery
$('.maindiv div a').click(function(){
$(this).next().toggle();
});
$('#showAll').click(function(){
$('.maindiv div div').show();
});
HTML
<div class="maindiv">
Click here to show all
<div>
Show/hide div1
<div>.....</div>
Show/hide div2
<div>.....</div>
</div>
</div>
CSS
.maindiv div a{
display:block;
}
.maindiv div div{
display:none;
}

Please try with the below code snippet.
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
//You can also write here if condition
divs[i].style.display = "block";
}

I think this can work
http://jsfiddle.net/rtu75/
function show() {
var divs = document.getElementsByClassName("maindiv");
var l = divs.length;
for( var i = 0; i < l; i++) {
divs[i].setAttribute("class", "show");
}
}
In your css
.show div {
display: block !important;
}
Added important since you have inline styles

Using jQuery, try
$("*").show();
or
$(parentElem).find("*").show();
or
$(":not(:visible)").show();
// This selects "*". Not I expected.
See w3 - css selectors, MDN - css pseudo classes, and jQuery $(), $().find(), $().filter() methods.

As I saw your code below, I saw it's almost work. You need to change id='div1' to class='hid' after that read my below step >> Go down
Show/hide div1
<div id="div1" style="display:none;">.....</div>
Here is my step, I am in same problem but now I can solve this because I read https://stackoverflow.com/a/24192071/10618118 then try to solve until done.
Read below,it's my code.It's work as I want.
in My Style for CSS be like this
<style>
.hid {}
</style>
Next is My Button to control it hidden or visible, Simple.
<button id="see" type="button" onclick="clickSee();">Show More ...</button>
Next step, look at my Javascript Code below,
I use JQuery 3.2.1 to change function in onclick of button.
when user want to hide or see more
just click Show More ... or ... Show less,
Actually it's the same button but user don't know.
If you didn't use JQuery yet and decide to use just copy
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
and paste in <head></head>
<script>
function clickSee() {
document.getElementById("see").innerHTML = "... Show Less";
var divs = document.getElementsByClassName("hid");
for (var i = 0; i < divs.length; i++){
divs[i].style.display = "block";
}
//I use JQuery
$("#see").attr("onclick", "clickHide()");
}
function clickHide() {
document.getElementById("see").innerHTML = "Show More ... ";
var divs = document.getElementsByClassName("hid");
for (var i = 0; i < divs.length; i++){
divs[i].style.display = "none";
}
//I use JQuery
$("#see").attr("onclick", "clickSee()");
}
</script>
If you have any issues just comment below, I will try to help because when done.
There are many way to make your idea work. but I see here is my basic way.
Feel free for new recommendation. Thank you.

How to remove all HTML tag by using the loop with Javascript

<div id='images'><img id='center_loadingImage' align='middle' src='loading.gif' alt='Loading Image'></div>
How to remove all <div> with the loop with Javascript?
Here is my code:
var value = document.getElementsByTagName("images");
for (var i = 0; i < value.length; i++) {
$(value[i]).remove();
}

You can only use same id value once per page. Change it to class, i.e. images
You will then have multiple div with class images and will be able to easily remove the spinners like this:
$(".images").remove();
If you have a lot of spinners, just wrap them with a div and remove the div. Something like this:
HTML:
<div id="jedi-wrapper">
<div class="images">
...
</div>
</div>
jQuery:
$("#jedi-wrapper").remove();
From the image, it looks like you are loading some values using AJAX. Why don't you remove the image on success?
Hope that helps

Seem like you want to remove all div with id images, but id is unique, you can use class instead:
<div class='images'><img class='center_loadingImage' align='middle' src='loading.gif' alt='Loading Image'></div>
then you can do:
$('.images').remove()

With your code you can do this:
document.getElementsByClassName("images").remove();
or more like jQuery:
$('.images').remove();
Althoug you can try this too:
var value = document.getElementsByClassName("images");
for (var i = 0; i < value.length; i++) {
$(value).eq(i).remove();
} //-------^^^^^^--------------you can make use of `.eq()` here
What your issue is there is no tag name like 'images' as your var suggests.
var value = document.getElementsByTagName("images");
images is the class name so you can use this:
document.getElementsByClassName("images")

Get element by ID, there's nothing with document.getElementsByTagName("images")
var c = document.getElementById('images');
var i, item = c.childNodes;
for (i = item.length; i--;) {
c.removeChild(item[i]);
}

You should probably be using class="images" instead of id="images" if that element is being rendered multiple times.
But to do this in a loop with raw javascript, you will need to first get the elements, convert them to an array, and then remove them in a loop.
var imageElements = doc.getElementsByClassName('images'),
images = Array.prototype.slice.call(imageElements);
for (var i = 0, l = images.length; i < l; i++) {
images[i].remove();
}
Notice that I don't just loop through imageElements... That's because getElementsBy...() returns a live list, so as soon as you remove() one of them, the list will be mutated and you will start running into undefined elements and javascript errors. To solve this, simply convert the live list to an array with Array.prototype.slice.call() and then loop through that array, removing the elements from the page.

looping javascript actions along timeline

I'm trying to loop some javascript actions along a timeline. It works only for the first post but doesn't work for the rest. Have a look at my code and help me point out what exactly i'm doing wrong. Thanks
Javascript
var comment = $('#add-comment');
var comments = $('#comments');
for (var i = 0; i < comment.length; i++) {
$(comments).hide();
$(comment).click(function() {
$(comments).slideToggle(500);
});
}
html
<input type="button" id="add-comment" Comment(s)">
<div id="comments">
<div id="other-comments">
<a href="#">
<img src="uploads/user/image">
<span class="full_name"><?=$rows['first_name']?> <?=$rows['last_name']?></span>
</a><br/>
<p><?=$rows['comment']?></p>
</div>
</div>
Edited
var comment = $('#feeds li #add-comment');
var comments = $('#feeds li #comments');
$(comments).each(function() {
$(this).hide();
});
$(comment).click(function() {
$(comments).each(function() {
$(this).slideToggle(500);
});
});
I found out that a little omission of an html element prevented it from looping. Now that it is looping if i click on the add comment it drops down all of the comment divs. I don't want it that way. I want the add-comment button to open it's respective div alone and not the whole thing. What can be done ?

Looks to me like a slight syntax hiccup.
Give this Jquery a try:
var comment = $('#add-comment');
var comments = $('#comments');
for (var i = 0; i < comment.length; i++) {
$(comments).hide();
}
$(comment).click(function() {
$(comments).slideToggle(500);
});

Changing css style sheet with javascript

I have the following:
<style>
.el {color: blue;}
</style>
<div class="el">bla bla</div>
<div class="el">bla bla 123</div>
And i need to use JavaScript to change the color in .el.
I know about document.styleSheets but that seems kind of crude, having to loop search for the class i want to change it that way. Isn't there some better (lighter) way to do this nowadays? Something like
document.stylesheets.getclass('.el').color = 'red';
Thanks.

You're on the right track. The method you're looking for is getElementsByClassName, not getClass. It returns an array, and then you simply loop through the array and assign the new color.
var el = document.getElementsByClassName('el'),
i;
for (i = 0; i < el.length; i += 1) {
el[i].style.color = 'red';
}
Demo
P.S., obviously, this changes the style, not the stylesheet.

Try this:
var elem = document.getElementsByClassName('el');
for (var i = 0; i < elem.length; i++) {
elem[i].style.color = '#aaaaaa';
}