Develop Reference

Javascript - how to change color with more elements

.tab{border: 1px solid black;}
<div class="tab">
<div class="img">
<button>HOVER</button>
</div>
<div class="text">
<p>Byt 3+kk s parkovacím stáním</p>
<p>PARDUBICE</p>
</div>
</div>
<div class="tab">
<div class="img">
<button>HOVER</button>
</div>
<div class="text">
<p>Byt 3+kk s parkovacím stáním</p>
<p>PARDUBICE</p>
</div>
</div>
<div class="tab">
<div class="img">
<button>HOVER</button>
</div>
<div class="text">
<p>Byt 3+kk s parkovacím stáním</p>
<p>PARDUBICE</p>
</div>
</div>
Ok i hope this html is ok. What i want is that if i hover a button, the color of "text" will change but just in div "tab" where the text is.

the div you want to change color is the sibling of the div with class = 'img'. use .img:hover + div{ to target in your css or remove the <div class='img' and target button:hover + div{
.tab {
border: 1px solid black;
}
button:hover {
color: red;
}
.img:hover + div {
color: blue;
}
button:hover + div{
color:green;}
<div class="tab">
<div class='img'>
<button>HOVER</button>
</div>
<div class="text">
<p>test1yt 3+kk s parkovacím stáním</p>
<p>PARDUBICE</p>
</div>
</div>
<div class="tab">
<button>HOVER</button>
<div class="text">
<p>test 2Byt 3+kk s parkovacím stáním</p>
<p>PARDUBICE</p>
</div>
</div>
<div class="tab">
<div class='img'>
<button>HOVER</button>
</div>
<div class="text">
<p>test 3Byt 3+kk s parkovacím stáním</p>
<p>PARDUBICE</p>
</div>
</div>

Find the overall index of an element in jQuery

Please help me someone how to get Index of an Element which is located in different tag groups. I want to get the index of that tag which respect to the body tag.
$('.selectthis > .wrapper > p').click(function() {
// $('.selectthis').length return 3
var getParentIndex = $(this).closest('.selectthis').index();
$('.result').text(getParentIndex);
//How to get index as 3 of tag selecthis when i click on 'text3'
//When i click on text1 or text3 result is same 0
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text1
</p>
</div>
</div>
<div class="selectthis">
<divc class="wrapper">
<p>
text2
</p>
</div>
</div>
</div>
<div style="border: 1px solid blue; margin: 10px;">
<div class="selectthis">
<divc class="wrapper">
<p>
text3
</p>
</div>
</div>
<p class="result">
</p>
</div>

The .selectthis elements are not siblings so to get the index of them related to each other you need to provide a selector to index() to find the current element within, eg. index('.selectthis')
Also note that the index of an element is zero-based, so the third element would return an index of 2. As such you need to add one to the value to get the output you want. Try this:
$('.selectthis > .wrapper > p').click(function() {
var getParentIndex = $(this).closest('.selectthis').index('.selectthis') + 1;
$('.result').text(getParentIndex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text1
</p>
</div>
</div>
<div class="selectthis">
<div class="wrapper">
<p>
text2
</p>
</div>
</div>
</div>
<div style="border: 1px solid blue; margin: 10px;">
<div class="selectthis">
<divc class="wrapper">
<p>
text3
</p>
</div>
</div>
<p class="result"></p>
</div>

There is no direct way as parent element of each selectthis is different.
One work around is, you can get the array of all selectthis and compare it with parent selectthis of clicked text.
see below code
$(function(){
$('.selectthis > .wrapper > p').click(function() {
var $selectThisArray = $('.selectthis');
var getParentIndex = 0;
var $parentElement = $(this).closest('.selectthis');
$.each($selectThisArray, function(index, val){
if($(val).is($parentElement)) {
getParentIndex = index;
}
});
$('.result').text(getParentIndex);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text1
</p>
</div>
</div>
<div class="selectthis">
<div class="wrapper">
<p>
text2
</p>
</div>
</div>
</div>
<div style="border: 1px solid blue; margin: 10px;">
<div class="selectthis">
<div class="wrapper">
<p>
text3
</p>
</div>
</div>
<p class="result">
</p>
</div>

2 divs on the same block show one hide the other onclick and loop

I have 2 divs on a block of content, one active and the other one is hidden.
I want to click on the div, hide the first one and show the second one.
Then when I click on the second one to hide it and show the first one.
I have however 12 more blocks with the same estructure and classes that need to have this functionality.
For the record I haven't make it work at all not even on one div.
<div class="feature-list-item">
<div class="first-one">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="second-one">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
And here is css:
.first-one {display:block;}
.second-one {display:none;}
I want to consider the easiest approach jquery, javascript it doesn't matter

Here is an example with isolated lists:
$(document).ready(function(){
$('.block').on('click', '.item', function(e){
$(this)
.removeClass('active')
.siblings('.item')
.addClass('active');
});
});
.blue .item {
background: blue;
}
.green .item {
background: green;
}
.item {
padding: 10px;
margin: 10px;
color: white;
display: none;
}
.item.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block blue feature-list-item">
<div class="item active first-one">
<div class="imgbox">
<p>Box 1<p/>
</div>
</div>
<div class="item second-one">
<div class="imgbox">
<p>Box 2<p/>
</div>
</div>
</div>
<div class="block green feature-list-item">
<div class="item active first-one">
<div class="imgbox">
<p>Box 3<p/>
</div>
</div>
<div class="item second-one">
<div class="imgbox">
<p>Box 4<p/>
</div>
</div>
</div>

This is the solution I found. Hide clicked and show next. I hope you are trying to show next but not specific one, if specific you trying to show then you gonna change the code.
DEMO HERE
HTML
<div class="click show">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
CSS
.show{
width:200px;
height:100px;
background-color:red;
}
.hidden{
display:none;
}
JS
$(document).ready(function(){
$('.click').click(function(){
$(this).removeClass('show');
$(this).addClass('hidden');
$(this).next('.hidden').addClass('show');
$(this).next('.hidden').removeClass('hidden');
});
});

How to reset scroll value on scroll down on Button click and manual?

Hello I am implementing a web page in which I want to scroll down to the next element on click on an item. This is working fine when it has specific sequence but if I am to change an item in particular section after selecting wrong item this sequence gets messed up. Code snippet is given below.
$('.item').on('click', function(e) {
$(this).parent().parent().find('p')
.removeClass('selectedItem');
$(this).find('p')
.addClass('selectedItem');
e.preventDefault();
var $current = $('.first'),
$next = $current.nextAll('.step').first();
if (!$next.length) {
$next = $('.step').first();
}
if ($next.length) {
var $next = $next.first();
var top = $next.offset().top;
$current.removeClass('first');
$('body').stop(true, true).delay(1000).animate({
scrollTop: top
}, 1000, function() {
$next.addClass('first');
});
}
});
.selectedItem {
background-color: red;
}
.step {
background-color: blue;
height: 500px;
}
.item {
border: 2px white solid;
height: 50px;
width: 50px;
margin: 5px;
float: left;
}
p {
margin: 5px;
height: 40px;
width: 40px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step first">
<h1 class='section'>
First Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
</div>
<div class="step">
<h1 class='section'>
Second Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
<div class="step">
<h1 class='section'>
Third Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
In above given example there are three section and lets say if I click on an item in section 1 then scroll goes down to the section 2. Same applies on section 2's item but if I manually scroll up to the previous section and re correct my item this sequence gets messed up.

The problem was that you were finding the next target by the added class, and not by the clicked element. this works
$('.item').on('click', function(e) {
$(this).parent().parent().find('p')
.removeClass('selectedItem');
$(this).find('p')
.addClass('selectedItem');
e.preventDefault();
var $current = $(this).closest(".step");
var $next = $current.next('.step');
console.log($next);
if (!$next.length) {
$next = $('.step').first();
}
var top = $next.offset().top;
$('body').stop(true, true).delay(1000).animate({
scrollTop: top
}, 1000);
});
.selectedItem {
background-color: red;
}
.step {
background-color: blue;
height: 500px;
}
.item {
border: 2px white solid;
height: 50px;
width: 50px;
margin: 5px;
float: left;
}
p {
margin: 5px;
height: 40px;
width: 40px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step first">
<h1 class='section'>
First Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
</div>
<div class="step">
<h1 class='section'>
Second Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>
<div class="step">
<h1 class='section'>
Third Section
</h1>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
<div class="item">
<p>
hello
</p>
</div>
</div>

find duplicated class within div using each()

<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
I have few block of '.d' , how to use each() to find whether '.head' is more than one? if yes, remove the duplicated '.head'
$('.d').each(function(index, value){
// find duplicated .head
}

Try to use .not() function along with :eq() selector to achieve what you want,
$('.d').each(function(){
$(".head",this).not(":eq(0)").remove();
});
DEMO

You don't need to use .each, just use a selector that matches all the duplicates after the first one.
$(".d .head:not(:nth-child(0))").remove();

Straight away you can do it in a single statement as:
$('.d').find(".head:gt(0)").remove();

You can also use :first-child
$('button').click(function() {
$(".d .head:not(:first-child)").remove();
})
.d {
border: 1px solid red;
padding: 5px;
margin-bottom: 5px;
}
.d .head {
border: 1px solid green;
padding: 5px;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
<p class="head"></p>
</div>
<div class="d">
<p class="head"></p>
</div>
<button>Remove</button>