移动后具有类的jQuery UI可排序最近元素

Question

在使用 jquery ui 可排序插件移动一行后，我正在尝试从 tr 中获取具有标题类的数据组。即一旦它被拖到表中的新位置，我就需要访问最接近的('tr.heading').data('group')，这样我就可以进行ajax调用来更新我的数据库。

无论我尝试什么，数据属性总是返回未定义。我可以 console.log data-some-id 所以我知道我可以访问该元素。

这是jsfiddle

<table id="sort">
<tbody>
<tr class="heading" data-group="1" data-something-else="2">
   <td colspan="4">Group 1</td>
</tr>
<tr data-some-id="1" class="index">
   <td>Some Id</td>
   <td>Some Name</td>
   <td>Some description</td>
   <td>Some action</td>
</tr>
<tr data-some-id="2" class="index">
   <td>Some Id 2</td>
   <td>Some Name 2</td>
   <td>Some description 2</td>
   <td>Some action 2</td>
</tr>
<tr data-some-id="3" class="index">
   <td>Some Id 3</td>
   <td>Some Name 3</td>
   <td>Some description 3</td>
   <td>Some action 3</td>
</tr>
<tr class="heading" data-group="2" data-something-else="2">
   <td colspan="4">Group 2</td>
</tr>
<tr data-some-id="4" class="index">
   <td>Some Id 4</td>
   <td>Some Name 4</td>
   <td>Some description 4</td>
   <td>Some action 4</td>
</tr>
<tr data-some-id="5" class="index">
   <td>Some Id 5</td>
   <td>Some Name 5</td>
   <td>Some description 5</td>
   <td>Some action 5</td>
</tr>
<tbody>
</table>

<script>
var fixHelperModified = function(e, tr) {
        var originals = tr.children();
        var helper = tr.clone();
        helper.children().each(function(index) {
            $(this).width(originals.eq(index).width())
        });
        return helper;
    },
    updateIndex = function(e, ui) {

        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
        });

        console.log('product id = ' +  $(ui.item).attr('data-some-id'));
        console.log('Some Group = ' + $(ui.item).closest(".heading").attr("data-group"));
    }

   $("#sort tbody").sortable({
     helper: fixHelperModified,
     stop: updateIndex
   }).disableSelection();
</script>

Answer 1

一开始我不明白你在寻找什么，所以这里是更新的并且希望是正确的解决方案。

所以是的，您的初始选择器错误，所以在将 td 更改为 tr 后，排序功能开始起作用。

$('tr.index', ui.item.parent()).each(function (i) {
    $(this).html(i + 1);
});

您报告的另一个问题是您的表格被弄乱了，这是由上述函数的第二行引起的，因为您基本上是用纯数字替换表格元素。

因此，我用以下代码部分代替了 $(this).html(i + 1) 行：

$(this).html(`
    <tr data-some-id="${i + 1}" class="index">
        <td>Some Id ${i + 1}</td>
        <td>Some Name ${i + 1}</td>
        <td>Some description ${i + 1}</td>
        <td>Some action ${i + 1}</td>
    </tr>`);

最后要回答你的最后一个问题，要获取具有类索引和标题的表行的值，请使用以下代码：

console.log('product id = ' +  $(ui.item).attr('data-some-id'));
console.log('Some Group = ' + $(ui.item).prevAll("tr.heading").first().attr("data-group"));

这是完整的解决方案 - jsfiddle