javascript / how to set the same value in nth-child of 2 classes

Question

https://codepen.io/jh-ko/pen/OBrMOO

 var table = [1, "red", 3, 
              4, "blue", 6];
  for (var i = 0; i < table.length; i += 3) {
 var x = table[i];
 var y = table[i+1];
 $(".Ali:nth-child(" + (x++) + ")").click(function() {
 $("div .me:nth-child(" + (x++) + ")").css("color", y);
});
}

--There is an example (codepen) on the top.--

I have 2 classes .Ali and .me

First of all, i want to have the same nth-child value of both classes. For example, when i click nth-child(1) of Ali class , i want to get the color red in nth-child(1) of me class.

but i get a blue in this code, ...

When i code it just with number directly, it works well.

".Ali:nth-child(4)"
"div .me:nth-child(4)"

My Goal: When i click a number (for example 3) in Group A, i want to have the color on the same number in Group B..

Answer 1

First of all, here is a working solution:

var table = ["red", "yellow", "pink", "blue", "green", "gold"];

$(".Ali").click(function() {
   var i = $(this).index();
   $("div .me").eq(i).css("color", table[i]);
 });

Your problem is the "x" variable that assumes a different value the second time you use it.

The order of execution is this:

• First iteration (for):
  1. i is 0
  2. x is table[0] = 1
  3. you assign an action to ".Ali:nth-child(1)
  4. x is x++ = 2
  5. y is table[1] = "red"
• Second iteration (for)
  1. i is 3
  2. x is table[3] = 4
  3. you assign an action to ".Ali:nth-child(4)
  4. x is x++ = 5
  5. y is table[5] = "blue"
• On first click
  1. x is 5
  2. you change color to $("div .me:nth-child(5)")
  3. the color is "blue"
• On second click
  1. x is 6, you change color to $("div .me:nth-child(6)")
  2. the color is "blue"
• And so on...

If you use global variables, such as your x and y, every change is global.

Answer 2

Can you query the index of the element being clicked and compare that to the index of the element you want to retrieve data from?

With .index() you can find where in clicked element exists in its order. With .eq()/:eq() you can target elements by their index within their group.

$('.me').click(function(){
  let i = $(this).index();
  i = i-1;
  console.log( $(`.ali:eq(${i})`).css('background-color') );
});

.ali, .me{
  height: 20px;
  width: 20px;
  display: inline-block;
  float: left;
  margin: 5px;
}

.me{ background-color: black; }

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

<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>
<div class="me"></div>

<div style="clear: both; width: 100%; "></div>

<div class="ali" style="background-color: red;"></div>
<div class="ali" style="background-color: rebeccapurple;"></div>
<div class="ali" style="background-color: blue;"></div>
<div class="ali" style="background-color: green;"></div>
<div class="ali" style="background-color: yellow;"></div>
<div class="ali" style="background-color: orange;"></div>
<div class="ali" style="background-color: red;"></div>
<div class="ali" style="background-color: rebeccapurple;"></div>
<div class="ali" style="background-color: blue;"></div>