查找具有特定数据属性jquery的最接近的先前元素 [英] Finding the closest, previous element with specific data attribute jquery

问题描述

这已经让我困扰了几个小时.

This has been troubling me for the passed few hours now.

我有一张桌子.在该表中，我正在寻找具有特定数据属性的最接近的上一个表行.我正在成功使用jquery sortable后立即进行此搜索.我已经尝试了几乎所有内容，但总会想到错误的内容.

I have a table. Within that table i'm looking for the closest, previous table row with a specific data attribute. I'm doing this search right after a successful use of jquery sortable. I've tried almost everything and it ALWAYS comes up with the wrong thing.

这就是我正在使用的

var newIndex = ui.item.index();
var menuLevel = parseInt($("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-level"));
var menuId = $("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-id");

if (menuLevel == 2) {
    var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","1").attr("data-menu-name");
    alert(findAboveRowName);    
}
if (menuLevel == 3) {
    var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","2").attr("data-menu-name");
    alert(findAboveRowName);    
}

本质上，变量"newIndex"应该在排序后获取该行的新位置，menuLevel应该获取该表行的数据属性"menu-level"，而menuId则获取该数据行的另一个数据属性.该表行.

Essentially, the variable "newIndex" is supposed to grab the new position of the row after being sorted, menuLevel is supposed to grab the data attribute "menu-level" of that table row, and menuId is grabbing another data attribute of that table row.

它专门在表行中寻找最接近的上一级菜单级属性.因此，如果移动菜单级属性为2的表行，它会寻找菜单级属性为1的最近的表行.

It's specifically looking for the nearest, previous menu-level attribute in the table rows. So if a table row with a menu-level attribute of 2 is moved, it's looking for the nearest table row with a menu-level attribute of 1.

如果需要，我将使用完整的jquery可排序脚本

The full jquery sortable script i'm using if needed

$("#sortable").sortable({
                update: function(event, ui) {
                    var serial = $('#sortable').sortable('serialize');
                    var newIndex = ui.item.index();
                    var menuLevel = parseInt($("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-level"));
                    var menuId = $("#menu-table").find("[data-menu-nesting='" + newIndex + "']").attr("data-menu-id");
                    if (menuLevel == 2) {
                        var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","1").attr("data-menu-name");
                        alert(findAboveRowName);
                        // $.post("./menu-controller.php", { adjustParent: true, id: menuId, parent: findAboveRowName });
                    }
                    if (menuLevel == 3) {
                        var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prev(".menu-table-rows").data("menu-level","2").attr("data-menu-name");
                        alert(findAboveRowName);
                        // $.post("./menu-controller.php", { adjustParent: true, id: menuId, parent: findAboveRowName });
                    }
                    $.ajax({
                    url: "./menu-controller.php",
                    type: "post",
                    data: serial,
                    success: function() {
                        $("#sortable").load("./menu-manager.php #menu-table", function() {
                            $.get('./menu-admin.js');
                        });
                },
                    error: function(){
                        alert("A problem occurred when moving this menu item. Please try again or contact support.");
                    }
                    });
                },
            handle:'.move-item',
            connectWith:'#menu-table',
            placeholder: "highlight",
            containment: "parent",
            revert: true,
            tolerance: "pointer",
            items: 'tbody > *'
});

JSFIDDLE

推荐答案

.prev仅返回紧接的前一个元素，它不会一直寻找与选择器匹配的最近元素.使用.prevAll查找与选择器匹配的所有元素，然后使用.first()将其缩小到最接近的第一个.如果要搜索特定的data-menu-level属性，则必须将其放入选择器中.调用.data("menu-level", 1) sets 属性，它不会搜索它.

.prev only returns the immediately previous element, it doesn't keep looking for the nearest element that matches the selector. Use .prevAll to find all the elements matching a selector, and then use .first() to narrow it down to the first one, which is the nearest. And if you want to search for a specific data-menu-level attribute, you have to put that in the selector; calling .data("menu-level", 1) sets the attribute, it doesn't search for it.

if (menuLevel == 2) {
    var findAboveRowName = $(".menu-table-rows[data-menu-nesting='" + newIndex + "']").prevAll(".menu-table-rows[data-menu-level=1]").first().data("menu-name");
    alert(findAboveRowName);    
}

这篇关于查找具有特定数据属性jquery的最接近的先前元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！