Comparing inside of elements from 2 different arrays and gives actions?

Is there any ways to compare index numbers from 2 different arrays?

Here's what I want to do:

if i[0] == k[0]
//give some action to k[0]
else if i[1] == k[1]
// give some action to k[1]



...and so on.

I could've made each functions 0 to 4 to fix my problem like that, but then the code would've been too long and unreadable. I want to optimize my code as much as I can.

I wrote the code like this but this doesn't work what I want. All the k keeps getting action when I hover one of the box group.

k

And this is my code:

var i = $('#boxgroup').children()
var k = $('#panelgroup').children()
$(i).each(function()
$(this).hover(function()
if($(i == k))
$(k).stop().animate(height: '500px')
, function()
$(k).stop().animate(height: '200px')
)
)


#boxgroup
width: 600px;
height: 200px;
border: 1px solid black;
clear: both;

.box
width: 200px;
height: 50px;
border: 1px solid black;
float: left;
position: relative;
top: 0px;
margin: 10px;

.panelgroup
clear: both;

.panel
width: 200px;
height: 200px;
border: 1px solid gray;
top: 400px;
float: left;


<div id="boxgroup">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<br>
<div id="panelgroup">
<div class="panel">panel1</div>
<div class="panel">panel2</div>
<div class="panel">panel3</div>
<div class="panel">panel4</div>
</div>

if($(i == k)){

if

$(i == k)

i == k

true

false

$()

1 Answer
1

It sounds like you want hovering over a child in #boxgroup to make the equivalent child in #panelgroup larger. If so, you don't need a series of ifs, you just need the index of the element:

#boxgroup

#panelgroup

if

$('#boxgroup > *').hover(
function()
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate(height: '500px');
,
function()
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate(height: '200px');

);


Live Example:

$('#boxgroup > *').hover(
function()
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate(height: '500px');
,
function()
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate(height: '200px');

);

#boxgroup
width: 600px;
height: 200px;
border: 1px solid black;
clear: both;

.box
width: 200px;
height: 50px;
border: 1px solid black;
float: left;
position: relative;
top: 0px;
margin: 10px;

.panelgroup
clear: both;

.panel
width: 200px;
height: 200px;
border: 1px solid gray;
top: 400px;
float: left;


<div id="boxgroup">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<br>
<div id="panelgroup">
<div class="panel">panel1</div>
<div class="panel">panel2</div>
<div class="panel">panel3</div>
<div class="panel">panel4</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

See:

index

:eq

#boxgroup > *

.box

#boxgroup > .box

#panelgroup > *

.panel

#panelgroup > .panel

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.