Question

我有一张这种格式的表格。

<table>
  <tr>
     <td class="divOne">div one</td>
     <td class="divOne">11111</td>
     <td style="visibility:hidden" class="divOne">id1</td>
  </tr>
  <tr>
     <td class="divOne">div two</td>
     <td class="divOne">22222</td>
     <td style="visibility:hidden" class="divOne">id2</td>
  </tr></div>
  </table>

我写了一个函数来显示鼠标悬停的另一个div。

$(function() {
  $('.divOne').hover(function() { 
  $('#Details').show(); 
}, function() { 
  $('#Details').hide(); 
});
});

现在我需要在鼠标上方获取'id'值。
我尝试了这个函数，但它返回一个空值......

$(function(){
$('.divOne').hover(function(){
  var id = $(this).find('td.hidden').html();
  alert(id);
});
});

任何人都可以帮助我吗？

Answer 1

说明

我认为其他人对你来说太难了。

您的代码存在的问题是，您试图在td内找到td。当您在事件函数的上下文中执行$(this)时，它会引用其事件被触发的元素。

$('.divOne').hover(function(){
    $(this); //<- "this" refers to the current "divOne" the user is hovering.
    // ".divOne" or $(this) is a td
    $(this).find("td.hidden"); //<- Attempts to find a td with the class "hidden" within ".divOne"
});

但是，如果您使用正确的树遍历函数siblings和伪类:hidden，那么您的成功将会成功。

$('.divOne').hover(function(){
   var id = $(this).siblings(":hidden").html();
});

这会给你隐藏的所有td。由于您的示例只有一个隐藏的列，因此它就足够了。

如果您想要特定的兄弟，您可以添加课程或使用组合:nth-child(n):hidden。

$('.divOne').hover(function(){
   var id = $(this).siblings(".myclass:hidden").html();
});

实施例

获取第三个和最后一个td的id的最简单方法是使用任何一个伪类

您也可以定义自己的类，例如myclass，然后执行

$("td.myclass")

Here's a working JSFiddle example |代码

$('table tr').hover(
    function(){
        var id = $("td:nth-child(3)", this).text();
        //var id = $("td:last-child", this).text();
        //var id = $("td.myclass", this).text();

        $("#Details").html("Details box.<br /> Hovering \""+id+"\"");
        $("#Details").show();
    }, function() {
        $('#Details').hide();
    }
);

注意使用选择器，我改为使用table tr，这样只有在您将鼠标悬停进出表行时才需要触发事件。这也使我能够使用上下文引用。现在$(this)指的是用户悬停的行，其所有子节点（td s）都位于其中。

我还使用了selector with a second parameter，定义了我选择的上下文。默认情况下，它是整个文档。

这会将选择限制为用户悬停的元素及其子元素。呃...那个，我的意思不是用户孩子，而是元素的孩子。

$("td:nth-child(3)", this)

等于：find the third table division within this row I'm hovering

参考

Answer 2

不是使用内联css“visibility：hidden”，而是在该对象中添加一个名为“hidden”的类，并在.css文件中添加：

.hidden {
    display:none;    
}

这将使您的代码工作（我认为），并使您的标记看起来更好。

Answer 3

如果你真的想要visibility:hidden而不是display:none，请使用过滤器（编辑：作为Crab Bucket注明，找到只搜索后代，当你想要的是兄弟姐妹）：

var id = $(this).siblings().filter(function() {
    return $(this).css("visibility") === "hidden";
}).html();

AFAIK没有直接的方式只使用选择器。（你可以检查“样式”属性并进行部分匹配，但是如果样式属性来自类或css文件则会中断）

Answer 4

您可以简单地使用jQuery属性选择器和“.nextAll（）”遍历方法，假设“id”列是唯一的隐藏列。请尝试以下方法：

$(function(){
  $('.divOne').hover(function(){
    var id = $(this).nextAll('td[visibility="hidden"]').text();
    alert(id);
  });
});

编辑：更正了选择器，thx到@mgibsonbr，提到“：hidden”选择器未覆盖可见性属性

Answer 5

find()函数适用于后代，因此$(this).find将无法找到悬停元素尝试

if($(this).has('.hidden'))
{
  var id = $(this).html();
}

Answer 6

为隐藏的td标记添加单独的类： class =“divOne hidden”。现在执行以下操作

$(function(){
    $('.divOne').hover(function(){
    var id11 = $('.hidden')[0];
    id1 = $(id11).html();
    var id22 = $('.hidden')[1];
    id2 = $(id22).html();
    alert(id1 + "  " + id2);
    });
});

如何从表中获取隐藏的td值？

6 个答案:

说明

实施例

参考