I need to access span inside div by using document.getElementsByClassName().
I have-
<div class="PERSON">
<span class="name">Person_name</span>
<span class="title">Person_title</span>
<span class="team">Person_team</span>
</div>
I need to access all spans with class team within all divs with class PERSON. How do I do it?
I have the following code -
function dispTeam(tname)
{
alert(tname);
var e=document.getElementsByClassName("PERSON");
for(var m=0;m<e.length;m++)
{
if(e[m].document.getElementsByClassName("team").innerHTML.indexOf(tname)==-1)
{
e[m].style.display="none";
}
else
{
e[m].style.display="block";
}
}
}
The alert is getting triggered but the elements are not getting displayed.
NOTE: There are divs with class PERSON which do NOT have span with class team. I need to include those divs in this condition too.
If they don't have span class team, those divs must not be displayed.
Use this code instead:
dispTeam=function(tname)
{
var divs=document.getElementsByTagName("div");
for(var i=0; i<divs.length; i++)
divs[i].style.display='none';
var span=document.querySelectorAll(".PERSON>.team");
for(var i=0; i<span.length; i++)
{
if(span[i].innerHTML.indexOf(tname)!=-1)
span[i].parentNode.style.display='block';
}
}
DEMO
Read More: querySelector() and querySelectorAll()
Related
I have had trouble getting hold of my elements class name. Now that I finally managed to do so, I do not seem to be able to add innerHTML to it.
I am adding an quote within an existing element. This is how I managed to get the class name as no other way of getElementsByClassName did not work:
var elements = document.getElementsByClassName('name-of-element');
for(var i=0; i<elements.length; i++) {
}
I tried combining the two scripts I have like so:
var elements = document.getElementsByClassName('name-of-element');
for(var i=0; i<elements.length; i++) {
elements.innerHTML = 'the change I am trying to make';
}
I tried changing the "elements" of "elements.innerHTML" but have not figured out anything that would work.
Any help is greatly appreciated!
You need to use elements[i] in your loop, it's not working because you're trying to change the innerhtml of the html collection rather than of the individual elements inside it.
Remember that getElementsByClassName (plural elements) returns an array-like object called a html collection.
var elements = document.getElementsByClassName('name-of-element');
for(var i=0; i<elements.length; i++) {
elements[i].innerHTML = 'the change I am trying to make';
}
<div class='name-of-element'></div>
<div class='name-of-element'></div>
<div class='name-of-element'></div>
<div class='name-of-element'></div>
<div class='name-of-element'></div>
I'm trying to write a simple script which will change the text of a number of anchors on a page. I'm quite new to Javascript and I'm able to change the anchors but it changes the whole tag including removing the href.
How do I edit just the text only without affecting the href?
<body>
<div class="loop-add-to-cart">
Add to basket
<div class="wpd-buttons-wrap-simple" data-id="11544">
Design from blank
</div>
</div>
<script>
function buybuttons() {
var buybuttons = document.getElementsByClassName('wpd-buttons-wrap-simple');
for(var i = 0; i < buybuttons.length; i++){
buybuttons[i].innerHTML="Test";
};
}
buybuttons();
</script>
</body>
You can use a query selector to get all a tags inside an element with a class of wpd-buttons-wrap-simple:
document.querySelectorAll('.wpd-buttons-wrap-simple a');
You can then set the textContent or innerHTML of the link.
<body>
<div class="loop-add-to-cart">
Add to basket
<div class="wpd-buttons-wrap-simple" data-id="11544">
Design from blank
</div>
</div>
<script>
function buybuttons() {
var buybuttons = document.querySelectorAll('.wpd-buttons-wrap-simple a');
for(var i = 0; i < buybuttons.length; i++){
buybuttons[i].textContent = "Test";
};
}
buybuttons();
</script>
</body>
Using 'querySelectorAll' you can get the element the class and the element inside as below:
document.querySelectorAll('.wpd-buttons-wrap-simple > a')
function buybuttons() {
var buybuttons = document.querySelectorAll('.wpd-buttons-wrap-simple a');
for(var i = 0; i < buybuttons.length; i++){
buybuttons[i].innerHTML="Test";
};
}
buybuttons();
You are currently overwriting the innerHTML of the div element, but you are looking for the anchor element inside of the div.
Use document.querySelectorAll to get all of them, or document.querySelector to only get the first.
I have three id tag
<div id="view_1"></div>
<div id="view_2"></div>
<div id="view_3"></div>
I use getElementsByClassName way it can work
but "class" I take it to delimit css style
How could use document.getElementById find -> "view_1" "view_2" "view_3"
function hideDIV(){
var divs = document.getElementById('view'.*);
for(var i=0; i<divs.length; i++) {
divs[i].style.display='none';
}
}
You can do this:
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
if(divs[i].id.indexOf('view_') == 0) {
divs[i].style.display='none';
}
}
DEMO
Use QuerySelectorAll for that:
document.querySelectorAll('[id^="view_"]').id;
This will get all views that start with view_
See:
Javascript getElementById base on partial string
Try doing this : Fiddle
JS:
$('[id*="view"]').hide();
Html:
<div id="view_1"> dcf</div>
<div id="view_2"> DSg</div>
<div id="view_3"> gsde</div>
No, it won't work.
document.getElementById() method accepts only one argument.
However, you may always set classes to the elements and use getElementsByClassName() instead. Another option for modern browsers is to use querySelectorAll()method:
use $("div[id*='view']")
DEMO :http://jsfiddle.net/mkufymqr/1/
Vanilla JavaScript
document.querySelectorAll('div[id^="view_"]');
jQuery
$('div[id^="view_"]');
CSS 3
div[id^="view_"] { ... }
But consider using classes, not IDs, to semantically target elements.
Eg: search for all DIVs with the targetDiv class, and add the hidden class to them. Then define the hidden class as display: none in CSS.
I need to add an EventListener function on every div with a certain class, I tried this:
var a = document.getElementsByClassName('linkto');
for (var i = 0; i<a.length;i++) {
a[i].addEventListener('click',function(){
console.log(a);
}); }
But that gives me all the divs. My divs are generated in a foreach loop:
#foreach($faqs['My_Stay'] as $faqheading)
<div class="row lowboarder linkcolor-darkblue linkto">
{{ link_to('#div'.$faqheading->id,$faqheading->heading) }}
</div>
#endforeach
Is there a good way to determine which div was clicked on?
try like below, "this" inside your click function refer to the clicked div
for (var i = 0; i<a.length;i++) {
a[i].addEventListener('click',function(){
console.log(this.innerText);
}); }
I have the following code in my javascript:
for (var a = 0; a < cnt; a++) {
var element = document.getElementById("button" + a).getElementsByTagName("div");
for (index = element.length - 1; index >= 0; index--) {
element[index].parentNode.removeChild(element[index]);
}
$("#button" + a).append("Some large html data");
}
I am deleting all the children from parent id "button0","button1"... and so on, which are divs.
and then appending new data to those parents.
However, this particular piece of code takes a long time to execute when the cnt is more than 200, which it usually is. How will I be able to speed it up? Is there an alternative way to delete all children divs without going through each of it?
<div class="main">
<p>hello p1</p>
<p>hello p2</p>
<span> hello world this is span </span>
</div>
$('.main p').remove(); // any number of depths
$('.main > p').remove(); // immediate children
Try this : You can use children selector to remove them, no need to iterate through children.
for (var a = 0; a < cnt; a++) {
//remove div elements inside button
$("#button"+a+" > div").remove();
$("#button" + a).append("Some large html data");
}
DEMO
IF you can have particular class to button div then you can get rid of for loop.
Lets say class="buttonDiv" is assigned to all button div, for example
<div id="button0" class="buttonDiv">
Now your jQuery script to remove child div will be like
$('div.buttonDiv').each(function(){
$(this).children("div").remove();
$(this).append("Some large html data");
});
DEMO with Class
You can use jQuery to delete them, but I don't know how much faster it will be. Under the covers it has to do pretty much the same work:
for (var a = 0; a < cnt; a++) {
$("#button" + a + " div").remove().end().append("Some large html data");
}
It would be much easier if you just add one class to all the buttons you want to remove the children of. Lets say you add the class button to all of them. Then you could just do this:
$('.button > div').remove(); // Removes all direct children divs of the .button element.
Or
$('.button div').remove(); // Removes all divs inside the `.button` element.