We Keep Coding

add unique class in randomly position to the div with the same class

I need all divs with the class "nprotagonistas__bg" only one add the class "hover" randomly.
<div class="nprotas">
<div class="container">
<div class="row">
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg grey">
</div>
<div class="nprotagonistas__content lectores">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg white">
</div>
<div class="nprotagonistas__content controladores">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg black">
</div>
<div class="nprotagonistas__content videointercomunicacion">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg red">
</div>
<div class="nprotagonistas__content aplicacion">
</div>
</div>
</div>
</div>
</div>
That is, only one of the class "nprotagonistas__bg" has to have the class "hover" randomly.

I don't really understood what you really want, but, here's a solution to achieve your task when the page is loaded.
So, when the page is loaded, we fetch all the divs containing the class nprotagonistas__bg and then randomly we'll assign the class hover to only one of the divs. This will be done depending on the number of divs containing the class nprotagonistas__bg and we'll use the built-in random method to get a random number that will be used as the index of the selected div(the random number is the index on the page of the div that's selected to get the hover class, so reloading the page ends in getting another random div).
With all that being said, here's a snippet to illustrate:
In the snippet, the hoverclass adds a red background to the element that has this class.
// waiting till the page is loaded by listening to the 'load' event on the 'window' object.
window.addEventListener('load', function() {
/**
* fetch all the divs with the class 'nprotagonistas__bg'.
* getting the number of these divs on the page(how many div is there).
* using the 'random' method we'll get a random number that is >= 0 and <= the number of the divs.
**/
var divs = document.querySelectorAll('div.nprotagonistas__bg'),
l = divs.length,
r = Math.ceil(Math.random() * l) - 1;
// assign the 'hover' class to a div depending on thethe random number.
divs[r].classList.add('hover');
});
.nprotagonistas__bg {
/* just to make the divs visible on the page */
height: 50px;
border: 2px solid green;
}
.nprotagonistas__bg.hover{
background: red;
}
<div class="nprotas">
<div class="container">
<div class="row">
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg grey">
</div>
<div class="nprotagonistas__content lectores">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg white">
</div>
<div class="nprotagonistas__content controladores">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg black">
</div>
<div class="nprotagonistas__content videointercomunicacion">
</div>
</div>
</div>
<div class="col-6">
<div class="nprotagonistas">
<div class="nprotagonistas__bg red">
</div>
<div class="nprotagonistas__content aplicacion">
</div>
</div>
</div>
</div>
</div>
Learn more about the random method.
Learn more about the ceil method.
Learn more about the addEventListener method.
Hope I pushed you further.

document.addEventListener('DOMContentLoaded', function(){
var elements = document.querySelectorAll(".nprotagonistas__bg");
var numberOfElements = elements.length;
var randomIndex = Math.floor(Math.random()*numberOfElements) + 1;
var current = elements[randomIndex];
current.classList.add('hover');
/* console.log('test'); */
});
You can improve it by triggering it when some event happened on your website like a click, a mouse hover, and so on and so though.
and to be sure that the .hover class is only on one element after the event is trigger because that event can be triggered many time
for example a click event on the body, within the event handler you select all the .nprotagonistas_bg and remove the hover
var elements = document.querySelectorAll(".nprotagonistas__bg");
elements.foreEach(function(element){
element.classList.remove('hover')
});
after that you can generate again a randomIndex and add the hover class to the corresponding element

javascript remove parent div where particular class appears in hierarchy below

First time question on this site. Sorry if I have failed the formatting test.
I am almost completely ignorant about javascript but I have been told I need it to solve this problem. I have a page where there are multiple divs with the same class. Each has a multi-level hierarchy beneath it. I want to stop the parent displaying if any of its children contain a div of a particular class. e.g. In the following code I want to stop all divs with class of "classa" displaying if one of their direct or indirect children contains class of "classb draft". So here, none of divb would display.
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa"
<div id="divabaaa" class="classb">
</div>
</div>
</div>
</div>
</div>
<div id="divb" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa"
<div id="divbbaaa" class="classb draft">
</div>
</div>
</div>
</div>
</div>

You are not closing div in
<div id="divabaa"
You can use querySelectorAll() to select all the children with that class (draft). Then use forEach() to loop through all the matching elements to find the closest() div with .classa to set display property to none.
var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
el.closest('.classa').style.display = 'none';
});
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa">
<div id="divabaaa" class="classb">
Without Draft
</div>
</div>
</div>
</div>
</div>
<div id="divs" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa">
<div id="divbbaaa" class="classb draft">
Draft
</div>
</div>
</div>
</div>
</div>

Select div having similar class name but no div id

Parent Class inddetails-wrapper clearfix has two divs which as further classes having same name.
I want to select first class col-md-6 nopadding. How should I do that ?
Below is the code:
<div class="inddetails-wrapper clearfix">
<div>
<div class="col-md-6 nopadding">...</div>
</div>
<div>
<div class="col-md-6 nopadding">...</div>
</div>
</div>

You can use :first-child:
.inddetails-wrapper div:first-child .col-md-6 {
background: #f00;
}
<div class="inddetails-wrapper clearfix">
<div>
<div class="col-md-6 nopadding">...</div>
</div>
<div>
<div class="col-md-6 nopadding">...</div>
</div>
</div>

as this question was tagged under jquery You can select the first element inside <div class="inddetails-wrapper clearfix"> using Jquery like this:
var firstChild = $( ".inddetails-wrapper.clearfix div" ).first();
and you can play with firstChild using more jquery properties depending upon what do you need.

how do toggleClass in jquery?

I has example code html
<div class="new">
<div class="wrapper">
<div class="icon"></div>
<div class="content">content</div>
</div>
<div class="list"></div>
<div class="wrapper">
<div class="icon"></div>
<div class="content">content</div>
</div>
<div class="list"></div>
</div>
updated: I want when click to class icon in wrapper first toggle class list first . And class list second not change. Many thanks

$('.icon').click(function(){
$(this).next('.content').toggle('slow')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="new">
<div class="wrapper">
<div class="icon">QWE</div>
<div class="content">content</div>
</div>
<div class="wrapper">
<div class="icon">QWE</div>
<div class="content">content</div>
</div>
</div>
Use .next()
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Or .siblings()
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

Show Hide div with css only

I'm trying to do a show / hide using css only, is that possible or does some type of jscript is needed? this is what i'm trying to do, when anyone one of the 4 div's are clicked the div for it below is shown.
<div class="span3">
<img src="an1.jpg" class="img-rounded" />
<h3>AN1<br />1234</h3>
</div>
<div class="span3">
<img src="an2.jpg" class="img-rounded" />
<h3>AN2<br />1234</h3>
</div>
<div class="span3">
<img src="an3.jpg" class="img-rounded" />
<h3>AN3<br />1234</h3>
</div>
<div class="span3">
<img src="an4.jpg" class="img-rounded" />
<h3>AN4<br />1234</h3>
</div>
Show div when div is click:
<div style="display: none;"> this is AN1 </div>
<div style="display: none;"> this is AN2 </div>
<div style="display: none;"> this is AN3 </div>
<div style="display: none;"> this is AN4 </div>

You can use a hidden input that can be toggled that corresponds to the label in the click area.
<div class="span3">
<label for="an1">
<img src="an1.jpg" class="img-rounded" />
</label>
<h3><label for="an1">AN1<br />1234</label></h3>
</div>
...
<input id="an1" type=checkbox><div style="display: none;"> this is AN1 </div>
Then in your CSS:
[type=checkbox] {
display: none;
}
:checked + div {
display: block !important;
}
I would also stear clear of style and just use the stylesheet.
http://jsfiddle.net/ExplosionPIlls/ZyAXA/1/

In most browsers you should simply use the href attribute of the a elements and an id for the element to show:
Div one
Div two
Div three
Div four
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
Coupled with the CSS:
#content > div {
display: none;
}
#content > div:target {
display: block;
}
JS Fiddle demo.
In the HTML the wrapper div (#content) isn't necessary, it's simply to make it easier to specifically target those elements it contains (you could, of course, simply use a class instead).
To add hiding functionality (to hide all, rather than just hide the sibling divs when showing another), unfortunately requires a link to trigger a hash-change (in order to stop the :target selector matching the divs), which in turn requires a link (either in each of the divs to show or elsewhere in the document, either linking elswhere (as follows):
<ul id="andHideAgain">
<li>Div one</li>
<li>Div two</li>
<li>Div three</li>
<li>Div four</li>
</ul>
<div id="content">
<div id="div1">This is div one <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div2">This is div two <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div3">This is div three <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div4">This is div four <a class="hide" href="#andHideAgain">hide</a></div>
</div>
JS Fiddle demo (link in each div).
Or the simple use of just a hash:
Div one
Div two
Div three
Div four
hide
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
JS Fiddle demo (using a single a, and an 'empty' hash).

this is how i solve show hide problem with just
here is my div with its class declared
<div class='loading'> </div>
and here is the javascript that
$('.loading').hide();
and
$('.loading').css("display", "block");