Javascript 获取网格上div的位置

我正在做一个棋盘游戏，我正在寻找更好的方法来管理棋盘上的棋子。我现在有一种方法，可以从坐标将它们放置在一块板上。这是存储播放器数据的JSON对象：

"players" : {
    "1" : {
        "id" : 1,
        "name": "ilya",
        "units" : [
            {
                "id" : 1,
                "row" : 1,
                "square" : 2
            },{
                "id" : 2,
                "row" : 2,
                "square" : 1
            },{
                "id" : 3,
                "row" : 3,
                "square" : 1
            }
        ]
    },

我只需创建一个div并将其附加到相应的board square div中，然后使用jquery ui移动它们即可：

$('<div/>', {
    class: 'draggable player' + player + ' unit unit' + unit,
}).appendTo('.row' + row + ' .square' + square + ' .unitPosition');

董事会：

---

我们对您的代码了解不多，但您似乎希望有一种将数据附加到HTML元素的方法，而不必依赖类，也不必从类名中提取数字

您可以将

data-

属性添加到每个表单元格和player div中，以分离数据，而不是（或另外）使用类。您的HTML将变成如下所示：

<table>
    <tr>
        <td data-row="1" data-col="1">
            <div data-player="1"></div>
        </td>
        <!-- etc -->
    </tr>
    <!-- etc -->
</table>

---

为了更新数据对象，如果将

units

更改为对象，而不是使用

id

作为每个元素的键的数组，则会使更新变得更简单

"players" : {
    "1" : {
        "id" : 1,
        "name": "ilya",
        "units" : {
            1: {
                "id" : 1,
                "row" : 1,
                "square" : 2
            },
            2:{
                "id" : 2,
                "row" : 2,
                "square" : 1
            }        
    }

您可以使用

index（）

方法获取行和单元格索引。为每个元素使用

data-

属性会有很大帮助

读取数据时，您可以使用

eq（）

根据数据中

row

和

squre

的值找到单元格

var $cell = $('tr').eq( row ).find('td').eq( square);
$('<div data-player="'+player.id+'" data-unit_id="'+unit+'"/>', {
    class: 'draggable player' + player + ' unit unit' + unit,
}).appendTo($cell);

现在，通过修改数据结构，可以很容易地更新主要对象

players

：

players[player].units[unit].row=row;
players[player].units[unit].square=square;

简单的单元格/行索引演示：

API参考资料：

---

每次移动后，您都要获取哪些数据？玩家id？看起来是html5数据属性或jquery数据对象的一个很好的用例。@bfavaretto我想要行中每个单元的位置/column@ATOzTOA我想知道是否有更好的方法来处理类，获取

square1

并提取

1

。也许可以通过某种方式预定义网格数据，而不使用DOM扫描来获取用户如何放置/移动这些数据块？@ATOzTOA用户拖动它们。我使用jquery UI Dragable&Dropable，并将它们重新附加到相应的

.unitPosition

var $cell = $('tr').eq( row ).find('td').eq( square);
$('<div data-player="'+player.id+'" data-unit_id="'+unit+'"/>', {
    class: 'draggable player' + player + ' unit unit' + unit,
}).appendTo($cell);

/* pseudo code, not sure what your drop/append code looks like*/

var $cell= /* your logic to define the cell being placed in*/
var square= $cell.index();
var row= $cell.parent().index();
/* read player and unit from "data-" attributes of DIV*/
var unit= $(this).data('unit_id'), player= $(this).data('player');

players[player].units[unit].row=row;
players[player].units[unit].square=square;