How can I get one certain element from HTML using JavaScript.
I have this code.
<div class="Content">
<div class="First Block">
<div class="num">Text From First Block</div>
</div>
<div class="Second Block">
<div class="num">Text From Second Block</div>
</div>
<div class="Third Block">
<div class="num">Text Third Second Block</div>
</div>
</div>
I want to write "Text From Second Block".
If I write this code
console.log(document.querySelector('.num').innerText);
I will get "Text From First Block"
You can do this in a few simple ways.
Use parent selector .Second.Block. Like this:
document.querySelector('.Second.Block > .num').innerText
Also, querySelector() allows you to specify pseudo-classes such as :nth-child(). Like this:
document.querySelector('.Block:nth-child(2) > .num').innerText
And use querySelectorAll(), referring as a collection, indicating the index in square brackets. Like this:
document.querySelectorAll('.num')[1].innerText
console.log(document.querySelector(".Second.Block > .num").innerText);
console.log(document.querySelector(".Block:nth-child(2) > .num").innerText);
console.log(document.querySelectorAll(".num")[1].innerText);
<div class="Content">
<div class="First Block">
<div class="num">Text From First Block</div>
</div>
<div class="Second Block">
<div class="num">Text From Second Block</div>
</div>
<div class="Third Block">
<div class="num">Text Third Second Block</div>
</div>
</div>
instead of using queryselector you can use getElementsByClassName() and instead of enter the index number of your tag
console.log(document.getElementsByClassName("Block")[i].innerHTML)
You could use document.querySelectorAll
console.log(document.querySelectorAll(".num")[1].innerText)
<div class="Content">
<div class="First Block">
<div class="num">Text From First Block</div>
</div>
<div class="Second Block">
<div class="num">Text From Second Block</div>
</div>
<div class="Third Block">
<div class="num">Text Third Second Block</div>
</div>
</div>
Related
How can I check a div by class (top) if he has an other div with an other class(bottom) inside so that the function returns a true or false in an array.
<div class="top">
<div class="bottom"></div>
</div>
<div class="top"></div>
I tried this but It only told me if the <div class="top"> contains the <div class="bottom"> and not if the <div class="top"> comes without the <div class="bottom">
if ($(".top").find(".bottom").length > 0){
}
You can exclude the ".top"-div's without ".bottom" with the has-method:
$('.top').has('.bottom').css('background', '#bada55');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
top has bottom
<div class="bottom">bottom</div>
</div>
<div class="top">top without bottom</div>
I'm looking to get my highlighter (blue bar) to stay on the element that is clicked on. I want to keep the hover animation but also include the option to have it stay on the <div> the user clicks. Any insight is greatly appreciated.
Pen: https://codepen.io/chriskaram/pen/eGXrOp
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment</h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Apprentice Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1"></span>
<span class="demo__hover demo__hover-2"></span>
<span class="demo__hover demo__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Apprentice Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In this example, I just focused on demo__element-3.
Check this link: https://codepen.io/anon/pen/GMbYdz
These are the modifications to be made:
CSS:
Add .active to all demo__hover-3:hover styles(in css).
(ie, add .demo__hover-3.active to .demo__hover-3:hover)
Element:
Add class
active to demo__hover elements.
(in this case, it become
<span class="demo__hover demo__hover-3 active"></span>)
Jquery:
Add jquery to add active to element if user clicks it.
Just like the bootstrap manu when you click one option it will add a class 'active' to element <li>
I have a div with the ID wrapper, and I am using .append() to insert some content at the end of that div, like this:
$("#wrapper").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
However, I also want the option to insert a new child before the last content div in the wrapper.
So if the HTML output looks like this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
I want to insert an element before the last one, so I get this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Third
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
How would I do this?
You could use .before() to add a sibling before the element:
$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
.insertBefore() does the same thing with a different syntax, namely that you select the element to be added, and pass the element you want to add it before.
$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
You can use insertBefore():
$('<div class="content"><div class="subcontent">Some stuff</div></div>').insertBefore('#wrapper > div:last');
Or before():
$('#wrapper > div:last').before('<div class="content"><div class="subcontent">Some stuff</div></div>');
This is how I got there:
http://jsfiddle.net/lharby/00tk6avg/
var htmlString = '<div class="subcontent">Some stuff</div>';
$(htmlString).insertBefore('.content div:last');
Select the last element with :last-of-type and use before() to append the new element:
$('.content:last-of-type').before('<div class="new">test</div>');
.new { color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
Use insertBefore:
$('<div class="content"><div class="subcontent">Third</div></div>').insertBefore('#wrapper .content:last');
Insert every element in the set of matched elements before the target.
Demo: http://api.jquery.com/insertBefore/
$( "<p>Test</p>" ).insertBefore( "#wrapper > div:last-child" );
You can last() for selecting last item, and before() for appending
$("#wrapper .content").last().before('<div class="content"><div class="subcontent">Some stuff</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class=" content ">
<div class="subcontent ">
First
</div>
</div>
<div class="content ">
<div class="subcontent ">
Second
</div>
</div>
</div>
you can use nth last child to select the second last div.
fiddle:
http://jsfiddle.net/08ta9wnL/
html:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
javascript:
$(document).ready(function(){
$("#wrapper div:nth-last-child(2)").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
});
You can do like this
$("#wrapper .content:last").before("<div class="content"><div class="subcontent">Some stuff</div></div>");
Have a look at fiddle https://jsfiddle.net/48ebssso/
Got a product loop, where I need to change images on click. Like in every product loop, there is a whole bunch of divs with same classes. Which in my case get affected. Can't isolated them. Initial image does disappear. But not a single one, that's intended, but all of them. And no new images appear
html of the single product
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1"></div>
<div class=" galitem galitem2"></div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2"></div>
</div>
</div>
and jquery
$(".product").each(function () {
$(this).find(".galcolor2").click(function () {
$(".galitem").hide();
$(this).parent().find(".galitem2").show();
});
});
http://jsfiddle.net/h1twaf1y/
http://jsfiddle.net/q72nw00t/2/
Javascript:
$(".galcolor2").click(function(){
$(".galitem").hide();
$(this).parent().parent().find(".galitem2").show();
});
HTML: (this is just a section repeated over and over again)
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1">this will be hidden</div>
<div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>
----------
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1">this will be hidden</div>
<div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>
----------
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1">this will be hidden</div>
<div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>
Basically you want to listen for any clicks on ALL .galcolor2, then when that is clicked, hide all .galitem, and then only show the RELATED .galitem2 by going up two levels to the div.product and finding the correct item
The problem in your initial code, is that you only went up ONE level with parent() to div.galcolors where you should have instead went up TWO levels with parent().parent(), up to div.product.
You want to find .galitem relative to the item clicked, the way you can find that is to use $.closest(). Closest will travel up the DOM tree (starting with the current node) until it finds a matching selector, which is much better than using parent because you're not dependent on the DOM structure making your code less brittle and easier to read. So your code would look like this instead:
$(".product").each(function(){
$(this).find(".galcolor2").click(function(){
$(".galitem").hide();
$(this).closest(".product").find(".galitem2").show();
});
});
I have the beginnings of what I would like working but am afraid I'm not headed down a DRY path with my line of thinking.
Right now if you click any of the below divs it will hide or show a icon checkmark next to all the headers below.
I want only when a specific div is clicked to display the icon checkmark to the relevant header down the page.
What method should I use in my approach? The way I have it seemingly won't make sense down the road. Thanks for your attention and thanks for taking a look.
<div class="row container">
<div class="row offset1">
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
</div>
</div>
<div class="offset2 span6" id='container'>
<h5 class="faq_header"><i class="icon-ok"></i> Hey, it would be cool if..</h5>
<div class='content'>trouble</div>
<hr>
<h5 class="faq_header"><i class="icon-ok"></i> The kick is up! And..</h5>
<div class='content'> 80% completion rate.</div>
<hr>
<h5 class="faq_header"><i class="icon-ok"></i> Third anecdote</h5>
<div class='content'>joke on me</div>
</div>
<script>
$('div.frustrate_topside').click(function(){
$('i').toggle();
});
</script>
Here's a working JS fiddle for what you're asking for: http://jsfiddle.net/sTve6/1/
I don't have your file set up with the icons/images, so I used placeholder text of 'o' for each icon, and made the assumption that your icons start out hidden.
HTML:
<div class="row container">
<div class="row offset1">
<div class="span3 frustrate_topside" for='q1'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside" for='q2'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside" for='q3'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
</div>
</div>
<div class="offset2 span6" id='container'>
<h5 class="faq_header"><i class="icon-ok" id="q1">o</i> Hey, it would be cool if..</h5>
<div class='content'>trouble</div>
<hr>
<h5 class="faq_header"><i class="icon-ok" id="q2">o</i> The kick is up! And..</h5>
<div class='content'> 80% completion rate.</div>
<hr>
<h5 class="faq_header"><i class="icon-ok" id="q3">o</i> Third anecdote</h5>
<div class='content'>joke on me</div>
</div>
CSS:
.icon-ok
{
display:none;
}
JS:
$('div.frustrate_topside').click(function(){
var elt = $(this).attr('for');
$("#" + elt).toggle();
});