jQuery 需要帮助在具有特定类的 div 元素中选择 tr 元素

Posted 2023-05-08

【中文标题】jQuery 需要帮助在具有特定类的 div 元素中选择 tr 元素

【英文标题】：jQuery need help selecting tr elements inside a div element with a specific class

【发布时间】：2016-06-24 10:59:30

【问题描述】：

我正在尝试使用 Kendo UI Grid 控件构建自定义悬停事件。使用锁定列时，我无法在鼠标悬停时突出显示整行。我找不到一个简单的例子来效仿。

目前悬停时的选择如下所示：

我编写了以下函数来尝试突出显示整行（锁定和解锁部分），但我似乎无法获得正确的 jQuery 选择器：

$("#ddhintgrid div.k-grid-content table tbody tr").hover(function () 
        //stuff to do on mouse enter
        var grid = $("#ddhintgrid").data("kendoGrid");
        var rowUid = grid.dataItem(this).uid;

            // select the row currently being edited
        $('[data-uid=' +rowUid + ']').addClass('k-state-hover');
    ,
    function () 
        //stuff to do on mouse leave
        $("#ddhintgrid .k-state-hover").removeClass("k-state-hover");
    );

这个方法的内容不重要。我只是希望它在用户将鼠标移到网格未锁定部分中的一行上时触发。

我希望 .hover() 函数触发的元素是 <div class="k-grid-content> 元素下的 tr 元素。见这里：

【参考方案1】：

我通过修改此处找到的解决方案找到了答案：Add jQuery hover effect across two tables。

我将以下代码添加到我的网格的 dataSource 的 dataBound 函数中：

var $trs = $('table.k-selectable tbody tr');
$trs.hover(
    function () 
        var i = $(this).index() +1;
        $trs.filter(':nth-child(' +i + ')').addClass('k-state-hover');
    ,
    function () 
        var i = $(this).index() +1;
        $trs.filter(':nth-child(' +i + ')').removeClass('k-state-hover');
    
);

希望这可以帮助其他遇到此问题的人。还没有发现任何问题。

【讨论】：

将函数放在 dataBound 参数中对我来说是固定的。 dataBound: function() $('.hover').hover(function(e) hover($(this),e););

【参考方案2】：

试试

$("#ddhintgrid > .k-grid-content > table > tbody > tr:not(:first, :last)").hover(function () ...);

您需要排除第一个和最后一个（页眉和页脚）tr。

此外，您需要遍历对面的表以找到关联的行，以便将 CSS 设置为“k-state-hover”/

示例： 我将鼠标悬停在锁定表中的 row1 上，现在该函数应该为锁定表 row1 设置 css，并在“k-grid-content”表中找到 row1，并为该行设置 css。这两行将具有不同的 UID，因此您不能依赖它进行比较，请尝试第 n 个孩子，或者如果您有行数据的唯一键，那么您可以使用它来比较它们。

【参考方案3】：

为了正确地对排序等产生影响，这必须在网格上的dataBound 事件中完成，或者应该能够在客户端完成。我没有测试这些，但它应该可以工作。

客户端绑定

你需要添加一个函数来使用切换类：

addHoverStyleToGridRow = function () 
    $("table.k-focusable tbody tr").hover(function() 
            $(this).toggleClass("k-state-hover");
        
    );
;

然后在数据绑定中：

// this is where the hover effect function is bound to grid
$("#ddhintgrid").kendoGrid( dataBound: addHoverStyleToGridRow );

服务器绑定

如果您使用的是服务器绑定网格，那么：

$(document).ready(function() 
     $("#ddhintgrid").find("table.k-focusable tbody tr").hover(function() 
            $(this).toggleClass("k-state-hover");
        
    );
);

【讨论】：

抱歉，这对我不起作用。我的 dataBound 函数中有其他内容，但我在其顶部添加了对 addHoverStyleToGridRow() 的调用。