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>

Trying to use javaScript to make the second image shows instead of the first

I'm trying to show the next image by just adding the style: display(none) but it is not working at all
<script>
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
displayBanner();
</script>
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"></div>
<div class="banner_img" id="banner_img2"></div>
<div class="banner_img" id="banner_img3"></div>
</div>
</div>
</header>

Your element does not exist when you execute the script before the element. Move the script to after the elements or move displayBanner into a load event
I assume you want to rotate the images
var count = 0, max;
function displayBanner() {
document.getElementById("banner_img"+count).style.display = "none";
count++
if (count === max ) count = 0
document.getElementById("banner_img"+count).style.display = "block";
}
window.addEventListener("load", function() {
max = document.querySelectorAll(".banner_img").length;
document.getElementById("banner_img0").style.display = "block";
setInterval(displayBanner, 3000);
})
.banner_img { display:none; text-align:center }
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img0"><img src="http://lorempixel.com/output/animals-q-c-640-480-1.jpg" /><br/>Image 1</div>
<div class="banner_img" id="banner_img1"><img src="http://lorempixel.com/output/animals-q-c-640-480-2.jpg" /><br/>Image 2</div>
<div class="banner_img" id="banner_img2"><img src="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" /><br/>Image 3</div>
</div>
</div>
</header>

your div didn't have any source add a source using <img src=""></img> for the div try below code for that
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg" ></div>
<div class="banner_img" id="banner_img2"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
<div class="banner_img" id="banner_img3"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
</div>
</div>
</header>
window.onload=displayBanner();
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
working demo:https://jsfiddle.net/athulmathew/yh2esp1c/21/

Show/hide div from separate links _ multiple boxes issue

I have managed to toggle a div with different links. But when i'm trying to make more boxes which the same it doesn't work anymore.
Imagine I have like 10 entries - all separated divs 'entry'
<div class="entry" id="1">
where i want to separately hide and show content with multiple links.
My Question is, I'm trying to fix this since 5 hours, but which one div entry its working, with more than one it is not working.
I tried to use
$(".entry").each(function() {
Here is my code:
$(document).ready(function() {
$(".entry").each(function() {
var b4c = $('.lower_menu').html(); // content of box 4 so that we cn refer to it later
$(".menu1,.menu2,.menu3").click(function() {
var active_content = $(".lower_menu").data('content');
var cls = $(this).attr('class');
if (active_content == '') {
$(".lower_menu").html($("." + cls + '_CONTENT').html())
$(".lower_menu").data('content', cls);
} else {
if (active_content == cls) {
$('.lower_menu').html(b4c).data('content', '');
} else {
$(".lower_menu").html($("." + cls + '_CONTENT').html())
$(".lower_menu").data('content', cls);
}
}
});
});
});
.menu1 {height:40px; background-color:red;}
.menu2 {height:40px; background-color:green;}
.menu3 {height:40px; background-color:blue;}
.menu1_CONTENT {display:none; background-color:red;}
.menu2_CONTENT {display:none; background-color:green;}
.menu3_CONTENT {display:none; background-color:blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entry">
<div class="menu1">
<span id="arrow_prod" class="glyphicon glyphicon-chevron-down arrow"></span> Heading 1
</div>
<div class="menu2">BOX 2</div>
<div class="menu3">BOX 3</div>
<!-- data-content is to check do we have content or which boxes's content do we hv now -->
<div class="lower_menu" data-content=""></div>
<div class="menu1_CONTENT">CONTENT FOR BOX 1</div>
<div class="menu2_CONTENT">CONTENT FOR BOX 2</div>
<div class="menu3_CONTENT">CONTENT FOR BOX 3</div>
</div>
<div class="entry">
<div class="menu1">BOX 1</div>
<div class="menu2">BOX 2</div>
<div class="menu3">BOX 3</div>
<!-- data-content is to check do we have content or which boxes's content do we hv now -->
<div class="lower_menu" data-content=""></div>
<div class="menu1_CONTENT">CONTENT FOR BOX 1</div>
<div class="menu2_CONTENT">CONTENT FOR BOX 2</div>
<div class="menu3_CONTENT">CONTENT FOR BOX 3</div>
</div>
... and a JSFiddle

it's a official bug of the jquery! We found one guys ! YEEEHAA

jQuery slice - last result

Lets say I have 100 divs and I want to show 5 divs each time.
onclick - I'm loading 5 more.
Any idea how to check if I reached the last div?
<div id="results">1</div>
<div id="results">2</div>
<div id="results">3</div>
<div id="results">4</div>
<div id="results">100</div>
$(function () {
$("results").slice(0, 5).show();
$("#moreresults").on('click', function(e){
e.preventDefault();
$("div:hidden").slice(0, 5).slideDown();
});
});
Load More

First of all the id attribute should be unique in the same document, so use common classes instead, e.g :
<div class="results">1</div>
<div class="results">2</div>
<div class="results">3</div>
<div class="results">4</div>
...
You could use index's with the help of the jQuery selectors lt() and gt(), check the working example below.
Hope this helps.
$(function () {
var number = 5;
var count = $('.results').length;
//Show just 5 first and hide the rest
$(".results:gt("+(number-1)+")").hide();
//Attach the click event
$("#moreresults").on('click', function(e){
e.preventDefault();
//Increment the 'number'
number = number+5;
//Show 'number' of element
$(".results:lt("+number+")").slideDown();
//Check if all divs are loaded
if( number >= count ){
console.log('All the divs are loaded');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">1</div>
<div class="results">2</div>
<div class="results">3</div>
<div class="results">4</div>
<div class="results">5</div>
<div class="results">6</div>
<div class="results">7</div>
<div class="results">8</div>
<div class="results">9</div>
<div class="results">10</div>
<div class="results">11</div>
<div class="results">12</div>
<div class="results">13</div>
<div class="results">14</div>
<div class="results">15</div>
<div class="results">16</div>
<div class="results">17</div>
<div class="results">18</div>
<div class="results">19</div>
<div class="results">20</div>
Load More

You can check to see if the last div is visible
if($('div:last').is(":visible")) {
//do things here
}

I made an working example for you here
First you have to use class not id on the 'results', and use $(".results:lt(5)")

Using last() and is():
var $results = $('.results');
$results.slice(5).hide();
$('#moreresults').click(function(e){
e.preventDefault();
var $nextResults = $results.filter(':hidden').slice(0,5).slideDown()
if( $nextResults.last().is( $results.last() ) ){
$(this).hide();
console.log('Last one')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">Item 1</div>
<div class="results">Item 2</div>
<div class="results">Item 3</div>
<div class="results">Item 4</div>
<div class="results">Item 5</div>
<div class="results">Item 6</div>
<div class="results">Item 7</div>
<div class="results">Item 8</div>
<div class="results">Item 9</div>
<div class="results">Item 10</div>
<div class="results">Item 11</div>
<div class="results">Item 12</div>
<div class="results">Item 13</div>
Load More

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>