使用特定数据属性jquery查找最接近的前一个元素

时间:2013-10-29 08:35:54

标签: javascript jquery

现在过了几个小时,这一直困扰着我。

我有一张桌子。在该表中,我正在寻找具有特定数据属性的最近的前一个表行。在成功使用jquery sortable之后,我正在进行此搜索。我几乎尝试了所有的东西,它总是想出错误的东西。

这是我正在使用的

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应该抓取该表行的数据属性“菜单级”,而menuId则抓取另一个数据属性表格行。

它专门在表格行中查找最近的,上一个菜单级属性。因此,如果移动了菜单级属性为2的表格行,它将查找菜单级属性为1的最近的表格行。

我正在使用的完整jquery可排序脚本

$("#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

1 个答案:

答案 0 :(得分:2)

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

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);    
}