I have the following Html:
<div class="box-row">
<div class="box c2-3">
<div class="box-overlay"></div>
<div class="box-letter"></div>
</div>
<div class="box c2-4">
<div class="box-overlay"></div>
<div class="box-letter"></div>
</div>
<div class="box c2-5">
<div class="box-overlay"></div>
<div class="box-letter"></div>
</div>
<div class="box c2-6 trr">
<div class="box-overlay trr"></div>
<div class="box-letter"></div>
</div>
</div>
I want to randomly select one of the elements with class: c2-3, c2-4, c2-5, c2-6 and trigger a click.
This is the code I have thus far:
var map = [
'c2-3', 'c2-4', 'c2-5', 'c2-6',
];
var x = Math.floor((Math.random() * 4));
var element = document.getElementsByClassName(map[x]);
At this point I want to trigger the click and am unsure how to do it:
element.trigger('click'); ??
Use element.click(); instead of element.trigger('click'); but also, you need to either get only a single element, or loop over the returned HTMLCollection from .getElementsByClassName().
For example, to loop:
var elements = document.getElementsByClassName(map[x])
elements.forEach(element => element.click())
...Or, to get a single element (still using getElementsByClassName):
var element = document.getElementsByClassName(map[x])[0]
element.click()
Alternatively, you can use querySelector:
var element = document.querySelector(`.${map[x]}`)
element.click()
Related
I have the DOM structure like below
<div class="table_body">
<div class="table_row">
<div class="table_cell">first</div>
<div class="table_cell">chocolate products</div><!-- want to access this div content -->
</div>
<div class="table_row">
<div class="table_cell">third</div>
<div class="table_cell">fourth</div>
</div>
</div>
From the above HTML I want to access the div content of second div with classname table_cell inside first table_row div.
So basically I want to retrieve the content of div with classname table_cell with content chocolate products.
I have tried to do it like below
const element = document.querySelector('.rdt_TableBody');
const element1 = element.querySelectorAll('.rdt_TableRow')[0]
const element2 = element1.querySelectorAll('.rdt_TableCell')[0].innerHTML;
When I log element2 value it gives some strange output and not the text "chocolate products"
Could someone help me how to fix this. Thanks.
You can use:
the :nth-of-type pseudo-selector
combined with the immediate-child selector (>)
Example:
const selectedDiv = document.querySelector('.table_body > div:nth-of-type(1) > div:nth-of-type(2)');
Working Example:
const selectedDiv = document.querySelector('.table_body > div:nth-of-type(1) > div:nth-of-type(2)');
selectedDiv.style.color = 'white';
selectedDiv.style.backgroundColor = 'red';
<div class="table_body">
<div class="table_row">
<div class="table_cell">first</div>
<div class="table_cell">chocolate products</div> //want to access this div content
</div>
<div class="table_row">
<div class="table_cell">third</div>
<div class="table_cell">fourth</div>
</div>
</div>
In your code
element1.querySelectorAll('.table_cell')[0], this is targeting the first element i.e., <div class="table_cell">first</div>. That's the reason why you are not getting the expected output.
I have made it to element1.querySelectorAll('.table_cell')[1], so that it'll target <div class="table_cell">chocolate products</div>.
const element = document.querySelector('.table_body');
const element1 = element.querySelectorAll('.table_row')[0]
const element2 = element1.querySelectorAll('.table_cell')[1].innerHTML;
console.log(element2);
<div class="table_body">
<div class="table_row">
<div class="table_cell">first</div>
<div class="table_cell">chocolate products</div>
</div>
<div class="table_row">
<div class="table_cell">third</div>
<div class="table_cell">fourth</div>
</div>
</div>
Since the element that you want to target is the last div with having class table_cell, you can use :last-of-type on table_cell class using document.querySelector. But otherwise you can also use :nth-of-type if there are more than 2 elements and you want to target any element in between first and last.
Below is the example using :last-of-type.
const elem = document.querySelector(".table_row > .table_cell:last-of-type");
console.log(elem?.innerHTML);
<div class="table_body">
<div class="table_row">
<div class="table_cell">first</div>
<div class="table_cell">chocolate products</div> //want to access this div content
</div>
<div class="table_row">
<div class="table_cell">third</div>
<div class="table_cell">fourth</div>
</div>
</div>
For more info you can refer :nth-of-type, :last-of-type and child combinator(>).
so here's an example of the working code
const test = document.getElementById('test')
const time = 1000
var timer;
test.addEventListener('touchstart', hlt)
test.addEventListener('touchend', endt)
function onlongtouch(){
console.log('it has been 600 milisecond')
}
function hlt(){
console.log('test');
timer = setTimeout(onlongtouch, time)
console.log(timer)
}
function endt(){
if(timer){
clearTimeout(timer)
}
}
And the HTML
<div class="data" id="test">
<div class="num"><p>1</p></div>
<div class="title"><p>Crush It</p></div>
<div class="author"><p>Gary Vaynerchunk</p></div>
<div class="ISBN"><p>132132312</p></div>
</div>
<div class="data">
<div class="num"><p>2</p></div>
<div class="title"><p>Crush It</p></div>
<div class="author"><p>Gary Vaynerchunk</p></div>
<div class="ISBN"><p>132132312</p></div>
</div>
<div class="data">
<div class="num"><p>3</p></div>
<div class="title"><p>Crush It</p></div>
<div class="author"><p>Gary Vaynerchunk</p></div>
<div class="ISBN"><p>132132312</p></div>
</div>
so i was taking a single element with an id of "test" and add the touch functionality to it, but what if i replace const test = document.getElementById('test') with document.querySelectorAll('data') im grabbing the same element but instead of a single element it's a whole nodelist full of element. How do i add functionality to all of them?
Thank you in advance!
let elements = [...document.querySelectorAll('.data')];
for(let el of elements) {
el.addEventListener('touchstart', hlt)
el.addEventListener('touchend', endt)
}
I have multiple sibling elements, some that are added dynamically and others manually or using JS. Each one has a data attribute of "data-sec_number" with a number value that increases by one for each new element down the page. At the moment I am manually writing these in.
E.g.
<div class="container">
<div class="row resource_sec" data-sec_number=1>
<div class="content sec_number" data-sec_number=1></div>
</div>
<div class="row resource_sec" data-sec_number=2>
<div class="content sec_number" data-sec_number=2></div>
</div>
<div class="row resource_sec" data-sec_number=3>
<div class="content sec_number" data-sec_number=3></div>
</div>
</div>
How can I get the value of attribute "data-sec_number" to match the index of the element .resource_sec within the .container element? E.g. the 3rd .resource_sec element will always have a "data-sec_number" value of 3.
I also have the child element of .resource_sec called .sec_number, which has the same data attribute that should mirror the parent.
The JS I have been trying to use is:
var items = $('.container .resource_sec');
var lastItem = $('.container .resource_sec:last');
var index = items.index(lastItem);
$('.resource_sec').attr('data-sec_number', index);
$('.sec_number').attr('data-sec_number', index);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row resource_sec" data-sec_number=1>
<div class="content sec_number" data-sec_number=1></div>
</div>
<div class="row resource_sec" data-sec_number=2>
<div class="content sec_number" data-sec_number=2></div>
</div>
<div class="row resource_sec" data-sec_number=3>
<div class="content sec_number" data-sec_number=3></div>
</div>
</div>
The meaning of this line
$('.resource_sec').attr('data-sec_number', index);
is to set the attribute value. to select (query) a specific index please use:
$('.resource_sec[data-sec_number=' + index + ']')
or
$(`.resource_sec[data-sec_number=${index}]`)
If you support ES6
UPDATE:
To add a new element in jQuery you may use:
var container = $('.container')
var newElement = $('<div class="row resource_sec"></div>').appendTo(container)
Then, you can fetch the new element index by passing it to the index method,according to Jquery documentation:
If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.
var index = container.index(newElement)
To append index to the new element attribute:
newElement.attr('data-sec_number', index)
Hullo, I am wondering how I can add a new link around/to an element, using only JavaScript? I am new to JavaScript, and I am sorry if this question seems stupid or too easy.
Current:
<div class="container">
<div class="content1"></div>
<div class="content2"></div>
</div>
Desired Code:
<div class="container">
<div class="content1"></div>
<a href="http://example.com">
<div class="content2"></div>
</a>
</div>
Just use normal DOM manipulation, nothing tricky required
const container = document.querySelector('.container');
const a = container.appendChild(document.createElement('a'));
a.href = "http://example.com";
a.appendChild(document.querySelector('.content2'));
console.log(container.innerHTML);
<div class="container">
<div class="content1"></div>
<div class="content2"></div>
</div>
Can use jQuery wrap()
$('.content2').wrap('<a href="http://example.com">')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content1">content 1</div>
<div class="content2">content 2</div>
</div>
Create a new a element and create a child in that element with the same content in your div and append the a element in the parent of the old div('.container')
var content2 = document.getElementsByClassName('content2')[0];
var container = content2.parentNode;
var a = document.createElement('a');
a.setAttribute("href", "www.google.com");
container.replaceChild(a, content2);
a.appendChild(content2);
<div class="container">
<div class="content1">Content1</div>
<div class="content2">Content2</div>
</div>
Using only pure Javascript, you can do something like this:
1. get your div by class (you can do using getElementById if you define an id for your div)
var mydiv = document.getElementsByClassName('content1');
2. create your anchor and set an href
var new_anchor = document.createElement("a");
new_anchor.href = "http://example.com";
3. Place the div content1 inside new anchor
new_anchor.append(mydiv[0]);
4. Place your entire element inside the container again
var mycontainer = document.getElementsByClassName('container');
mycontainer[0].insertBefore(new_anchor, mycontainer[0].childNodes[0])
I have a html structure like the following:
<div id="first">
<div id="second">
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
</div>
</div>
And the following javascript / jquery code:
$(".inside").mouseover(function(ev){
var el = ev.currentTarget;
//TODO: get real element
var el_position = 1;
});
What I want to do is check the number of ".inside" that is being hovered with the mouse. So, if I hover the first entry of ".inside" it should display "1". In the fourth it should display "4". But accessing the variable "el" (ev.currentTarget) has no "element position" property or anything of the alike that would allow me to understand the position of the actual hovered element in relation to "#second" (the first, second, third, etc .inside).
So, does anyone have any idea? Can I get some help? Thank you very much :)
You can use .index() which returns the 0-based index of the element within a collection
$(".inside").mouseover(function(ev) {
var el = ev.currentTarget;
//TODO: get real element
var el_position = $(el).index(".inside") + 1;
console.log(el_position);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="first">
<div id="second">
<div class="inside">1</div>
<div class="inside">2</div>
<div class="inside">3</div>
<div class="inside">4</div>
<div class="inside">5</div>
</div>
</div>