Develop Reference

How to get a index of class onhover?

I have the following div structure:
<div class="0">
<div class="test"></div>
</div>
<div class="1">
<div class="test"></div>
</div>
<div class="2">
<div class="test"></div>
</div>
<div class="3">
<div class="test"></div>
</div>
For example, if I hover on the 1st class: document.getElementbyClassName('test')[0], I should get index value is 0.
Edit: I'm looking for a pure JS solution

You can use the following code:
$('.test').mouseenter(function() {
console.log("index: " + $(this).index('.test'));
})
$('.test').mouseenter(function() {
console.log("index: " + $(this).index('.test'));
})
.test {
height: 100px;
width: 100px;
border: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

To do this in pure JS you can use querySelectorAll() to retrieve the target elements and bind a mouseenter event handler to them. Then you can find the index of the element which triggered the event by comparing it to the collection of children in the parent. Something like this:
let elements = document.querySelectorAll('.test');
elements.forEach(el => el.addEventListener('mouseenter', e => {
let index = Array.from(elements).indexOf(e.target);
console.log(index);
}));
<div class="1">
<div class="test">Test 1</div>
</div>
<div class="2">
<div class="test">Test 2</div>
</div>
<div class="3">
<div class="test">Test 3</div>
</div>
<div class="4">
<div class="test">Test 4</div>
</div>

This code Use pure java script :
var divItems = document.querySelectorAll(".test");
var mytab = [];
var index = 0;
for (let i = 0; i < divItems.length; i++) {
mytab.push(divItems[i].innerHTML);
}
for (var i = 0; i < divItems.length; i++)
{
divItems[i].onmouseover = function ()
{
index = mytab.indexOf(this.innerHTML);
console.log(this.innerHTML + " Index = " + index);
};
}
<div class="test">Hover me 1</div>
<div class="test">Hover me 2</div>
<div class="test">Hover me 3</div>
<div class="test">Hover me 4</div>

How to call function after javascript .scroll()

Description
I want to call a function after the javascript .scroll() function has finished.
Code
The interesting part is the javascript:
const vertScroll = document.getElementById('boxSlider');
$("#btnLeft").on("click", () => {
vertScroll.scroll({
left: vertScroll.scrollLeft - 120,
behavior: "smooth"
});
//This should print out the new value of
//vertScroll but instead always prints the value
//before scroll()
console.log(vertScroll.scrollLeft);
});
$("#btnRight").on("click", () => {
vertScroll.scroll({
left: vertScroll.scrollLeft + 120,
behavior: "smooth"
});
//same as above
console.log(vertScroll.scrollLeft);
});
.boxSlider {
width: 100%;
overflow-x: auto;
white-space: nowrap;
display: inline-block;
}
.box {
display: inline-block;
background-color: cyan;
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxSlider" class="boxSlider">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
<div class="box">Box 9</div>
<div class="box">Box 10</div>
</div>
<input id="btnLeft" type="Button" value="Scroll left"/>
<input id="btnRight" type="Button" value="Scroll right" />
Expected Behaviour
console.log(...) should output the scroll value after the scroll() function has completed.
Not the answer
Don't just do console.log(scrollLeft - 120) (or +120) since I want to implement more complex code there and the console.log() is just for better understanding.
What I've tried
I've looked at the scroll() docs (mozilla scroll()) and it doesn't seem to have a callback function.
Question
How can I achieve the expected behaviour?
TIA

Javascript Toggle opening all divs [duplicate]

This question already has answers here:
jQuery toggle children of div
(4 answers)
Closed 4 years ago.
I'm trying to make an accordion and I'm using the same classes for each row. Like this.
$(document).ready(function() {
$(".faq-article").click(function() {
$(".faq-details").toggle();
})
});
.faq-details {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
<div class="faq-article">
<div class="title-faq">Question 1</div>
<div class="faq-details">answer</div>
</div>
<div class="faq-article">
<div class="title-faq">Question 2</div>
<div class="faq-details">answer 2</div>
</div>
</div>
I can't remember how to prevent showing all the faq-details when clicking on the first question title.

You need to use this as context of your search for the .faq-details element.
$(document).ready(function() {
$(".faq-article").click(function() {
$(".faq-details", this).toggle();
})
});
.faq-details {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
<div class="faq-article">
<div class="title-faq">Question 1</div>
<div class="faq-details">answer</div>
</div>
<div class="faq-article">
<div class="title-faq">Question 2</div>
<div class="faq-details">answer 2</div>
</div>
</div>

As there are multiple elements with class faq-article, when implementing toggle() on that class all elements are affected. To get the currently clicked element you have to target the current context of the click event by specifying this.
Change
$(".faq-details").toggle();
To
$(this).find(".faq-details").toggle(); OR $(".faq-details", this).toggle();
$(document).ready(function() {
$(".faq-article").click(function() {
$(this).find(".faq-details").toggle();
})
});
.faq-details {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
<div class="faq-article">
<div class="title-faq">Question 1</div>
<div class="faq-details">answer</div>
</div>
<div class="faq-article">
<div class="title-faq">Question 2</div>
<div class="faq-details">answer 2</div>
</div>
</div>

show certain elements in an array

I have a 6 divs (although the code should work for any number of divs). I want to show 4 divs at a time when the button #more-projects is clicked. Ideally, the the first 4 divs would be shown when the #more-projects is clicked for the first time, when it's clicked again all divs are hidden and then the next divs are shown in this case it would be 5 and 6 would be along with 1 and 2. Whenever the #more-projects is clicked the next four divs would be shown. Below is my approach but I don't know how to progress
$('#more-projects').on('click', function() {
var projects = [];
var shown = [];
var start = [];
$('.thumbnail-cnt').each(function(i) {
projects.push($(this).data('num'));
})
var shown = projects.slice(0,4);
$('[data-num="' + shown.join('"], [data-id="') + '"]').addClass('visible');
});
.thumbnail-cnt {
display: none;
}
.visible {
display: block;
}
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<div class="thumbnail-cnt" data-num="1">
</div>
<div class="thumbnail-cnt" data-num="2">
</div>
<div class="thumbnail-cnt" data-num="3">
</div>
<div class="thumbnail-cnt" data-num="4">
</div>
<div class="thumbnail-cnt" data-num="5">
</div>
<div class="thumbnail-cnt" data-num="6">
</div>
<button id="more-projects">
</button>
From here I was going slice the projects to be shown, add class .visible and make a var of the index in the array that should be the starting point of the next 4 projects. But I don't know how to implement this of to cycle back to the start of the array. Any help would be appreciated.

Please check this code
HTML
<div id="container">
<div class="thumbnail-cnt" data-num="1">1
</div>
<div class="thumbnail-cnt" data-num="2">2
</div>
<div class="thumbnail-cnt" data-num="3">3
</div>
<div class="thumbnail-cnt" data-num="4">4
</div>
<div class="thumbnail-cnt" data-num="5">5
</div>
<div class="thumbnail-cnt" data-num="6">6
</div>
</div>
<button id="more-projects" > Next
</button>
JS
$(document).ready(function(){
var divQueue = [];
$("#container div").each(function(){
divQueue.push($(this));
});
function showDivs(){
$("#container").html('');
$(".thumbnail-cnt").css("display","none");
var i=0;
while(i<4){
var temp = divQueue[0];
$("#container").append(temp[0]);
divQueue.shift();
divQueue.push(temp);
i++;
}
}
showDivs();
$("#more-projects").click(function(){
showDivs();
});
});
CSS
.thumbnail-cnt {
height : 30px;
width : 25px;
}
#more-projects {
width : 100px;
height : 50px;
}
Please refer Fiddle

I would try to assign an id for each div, something like:
<div class="thumbnail-cnt" id="div1" data-num="1">
</div>
<div class="thumbnail-cnt" id="div2" data-num="2">
</div>
<div class="thumbnail-cnt" id="div3" data-num="3">
</div>
<div class="thumbnail-cnt" id="div4" data-num="4">
</div>
<div class="thumbnail-cnt" id="div5" data-num="5">
</div>
If you are using Jquery you can use the methods hide() and show()
If you want to show X divs:
for(var i = 1; i < X; i ++){
$('#div'+i).show();
}
for(var i = X; i < numDivs; i ++){
$('#div'+i).hide();
}

Using arrays have managed to rotate the divs. Check if this is what you are looking for:
var divs = [];
$('.thumbnail-cnt').each(function() {
divs['' + $(this).index() + ''] = $(this).data('num');
divs.push($(this).text());
});
divs.splice(0, 1);
$('#more-projects').on('click', function() {
$('.thumbnail-cnt').hide();
var count = 0;
$(divs).each(function(k, v) {
if (count == 4)
return false;
$('.thumbnail-cnt[data-num="' + v + '"]').show();
divs.push(divs.shift());
count++;
});
});
.thumbnail-cnt {
display: none;
}
.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail-cnt" data-num=1>Test 1</div>
<div class="thumbnail-cnt" data-num=2>Test 2</div>
<div class="thumbnail-cnt" data-num=3>Test 3</div>
<div class="thumbnail-cnt" data-num=4>Test 4</div>
<div class="thumbnail-cnt" data-num=5>Test 5</div>
<div class="thumbnail-cnt" data-num=6>Test 6</div>
<div class="thumbnail-cnt" data-num=7>Test 7</div>
<div class="thumbnail-cnt" data-num=8>Test 8</div>
<div class="thumbnail-cnt" data-num=9>Test 9</div>
<button id="more-projects">More</button>

Edit css of "item" when clicking on corresponding "btn"

So I have this
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>
http://jsfiddle.net/uzpxjukv/
You have btn1, btn2, btn3 and btn4. I'm trying to make it so that when you press btn1, the div with the class pre1 should then get "display: block;" or something to make it visible. Then when btn2 is clicked, pre1 turns invisible again and pre2 turns visible.

Maybe something like this? If there will be more buttons, it should be more optimalized.
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
.prevs div:not(.pre1) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1">Button 1</div>
<div class="btn2">Button 2</div>
<div class="btn3">Button 3</div>
<div class="btn4">Button 4</div>
</div>
<div class="prevs">
<div class="pre1">Previews 1</div>
<div class="pre2">Previews 2</div>
<div class="pre3">Previews 3</div>
<div class="pre4">Previews 4</div>
</div>

JSFIDDLE DEMO -> http://jsfiddle.net/uzpxjukv/5/
$('.btns div').click(function() {
var classNumber = this.className.slice(-1);
$('.prevs div').hide();
$('.pre' + classNumber).show();
});
On click of the button div, first hide all the pre divs and then show only the relevant div.

Try it
$('.btns > div').on('click', function() {
var numberOfDiv = $(this).attr('class').slice('-1'),
prevs = $('.prevs');
prevs.find('> div').hide();
prevs.find('.pre' + numberOfDiv).show();
});
This example is with your html code, if is possible to change it, you can get a better code.

See the fiddle
I have changed your HTML a little bit..Changed the class attribute of the prevs divsti ids.
HTML
<div class="btns">
<div class="btn1" id="1" onClick="reply_click(this.id)"></div>
<div class="btn2" id="2" onClick="reply_click(this.id)"></div>
<div class="btn3" id="3" onClick="reply_click(this.id)"></div>
<div class="btn4" id="4" onClick="reply_click(this.id)"></div>
</div>
<div class="prevs">
<div id="pre1"></div>
<div id="pre2"></div>
<div id="pre3"></div>
<div id="pre4"></div>
</div>
JS
function reply_click(id) {
document.getElementById("pre" + id).style.display = "block";
}

Provided that you know what naming system the divs use, you could use something along these lines. (To see properly working, view using developer tool)
$('.btns div').on('click', function() {
var currClass = $(this).attr('class').slice(-1); //get end of number of div clicked
$('.prevs div').css('display', 'none'); //reset all divs to being hidden
$('.pre' + currClass).css('display', 'inline-block'); //show desired div
});
.btns div {
background-color: gray;
}
.btns div, .prevs div {
width: 2em;
height: 2em;
display: inline-block;
padding-right: 0.2em;
}
.prevs div {
background-color: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>