Как установить динамические координаты из списка для объектов div jQuery

Question

Я пытаюсь установить массив координат для элементов div. По некоторым причинам это не установка координат. Я попробовал несколько методов, которые не работают для меня. Как я могу решить эту проблему?

var listOfCordinates = [
  { x: 20, y: 100 },
  { x: 130, y: 115 },
  { x: 200, y: 130 }
];

function getCords() {
  $(listOfCordinates).each(function (i, data) {
    console.log(data.x, data.y)
    moveElement(data.x, data.y)
  });
}

getCords()

function moveElement(x, y) {
  $(".lpms3-box").css({
    left: x,
    top: y
  });
}

.lpms3-box {
  position: fixed;
  background-color: #fff;
  width: 150px;
  height: 90px;
  border-radius: 5px;
  margin: 10px;
}

.machine-icon {
  float: left;
  width: 50px;
  height: 90px;
}

.machine-icon>img {
  width: 50px;
  height: 50px;
  margin-top: 40%;
}

.title-box {
  float: right;
  margin-right: 12%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lpms3-box">
  <div class="machine-icon">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
  </div>
  <div class="title-box">Some title</div>
  <div class="desc-box">Some description</div>
</div>
<div class="lpms3-box">
  <div class="machine-icon">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
  </div>
  <div class="title-box">Some title</div>
  <div class="desc-box">Some description</div>
</div>
<div class="lpms3-box">
  <div class="machine-icon">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
  </div>
  <div class="title-box">Some title</div>
  <div class="desc-box">Some description</div>
</div>

Answer 1

L oop поверх элементов и соответственно установите данные. Когда вы пишете $(".lpms3-box").css, он повторяет css во всех одинаковых.

Вы можете получить тот же результат, обновляя индекс ui.

var listOfCordinates = [
  { x: 20, y: 100 },
  { x: 130, y: 115 },
  { x: 200, y: 130 }
];

function getCords() {
  $(listOfCordinates).each(function(i, data) {
    moveElement(i, data);
  });
}

getCords();

function moveElement(index, data) {
  $($(".lpms3-box")[index]).css({
    left: data.x,
    top: data.y
  });
}

Пример :

var listOfCordinates = [{
    x: 20,
    y: 100
  },
  {
    x: 130,
    y: 115
  },
  {
    x: 200,
    y: 130
  }
];

function getCords() {
  $(".lpms3-box").each(function (i, elm) {
    const data = listOfCordinates[i]
    $(this).css({
      left: data.x,
      top: data.y
    });
  });
}

getCords()

.lpms3-box {
  position: fixed;
  background-color: #fff;
  width: 150px;
  height: 90px;
  border-radius: 5px;
  margin: 10px;
}

.machine-icon {
  float: left;
  width: 50px;
  height: 90px;
}

  .machine-icon > img {
      width: 50px;
      height: 50px;
      margin-top: 40%;
  }

.title-box {
  float: right;
  margin-right: 12%;
}

 <div class="lpms3-box">
        <div class="machine-icon">
            <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
        </div>
        <div class="title-box">Some title</div>
        <div class="desc-box">Some description</div>
    </div>
    <div class="lpms3-box">
        <div class="machine-icon">
            <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
        </div>
        <div class="title-box">Some title</div>
        <div class="desc-box">Some description</div>
    </div>
      <div class="lpms3-box">
        <div class="machine-icon">
            <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
        </div>
        <div class="title-box">Some title</div>
        <div class="desc-box">Some description</div>
    </div>
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

Answer 2

Проблема в том, что moveElement предназначается для всех элементов в каждой итерации.

Чтобы исправить это, вам просто нужно пропустить l oop через каждый .lpms3-box и обновить его положение, используя объект в массиве с тем же индексом. Попробуйте это:

var listOfCordinates = [
  { x: 20, y: 100 },
  { x: 130, y: 115 },
  { x: 200, y: 130 }
];

function getCords() {
  $('.lpms3-box').each(function(i) {
    $(this).css({
      left: listOfCordinates[i].x,
      top: listOfCordinates[i].y
    });
  });
}

getCords();

.lpms3-box {
  position: fixed;
  background-color: #fff;
  width: 150px;
  height: 90px;
  border-radius: 5px;
  margin: 10px;
  border: 1px solid #C00;
  background-color: #CCC;
}

.machine-icon {
  float: left;
  width: 50px;
  height: 90px;
}

.machine-icon>img {
  width: 50px;
  height: 50px;
  margin-top: 40%;
}

.title-box {
  float: right;
  margin-right: 12%;
}

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

<div class="lpms3-box">
  <div class="machine-icon">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
  </div>
  <div class="title-box">Some title</div>
  <div class="desc-box">Some description</div>
</div>
<div class="lpms3-box">
  <div class="machine-icon">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
  </div>
  <div class="title-box">Some title</div>
  <div class="desc-box">Some description</div>
</div>
<div class="lpms3-box">
  <div class="machine-icon">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
  </div>
  <div class="title-box">Some title</div>
  <div class="desc-box">Some description</div>
</div>

Answer 3

Вам необходимо добавить единицу CSS, например px.
Кроме того, left и top должны быть строками внутри CSS метода.

И изменить каждый из них отдельно передайте индекс в качестве параметра.

var listOfCordinates = [
    { x: 20, y: 100 },
    { x: 130, y: 115 },
    { x: 200, y: 130 }
];

function getCords() {
    $(listOfCordinates).each(function (i, data) {
        console.log(data.x, data.y, i)
        moveElement(data.x, data.y, i)
    });
}

getCords()

function moveElement(x, y, i) {
    $(".lpms3-box").eq(i).css({
        "left": x + "px",
        "top": y + "px"
    });
}