悬停在TD标签内获取内容

Question

<td>
   Some stuff here
   <span style="display: none;">sekret stuff here</span>
</td>

我将如何使用jQuery在该td中获取<span>标记的内容，以便我的输出为“此处的秘密内容”？

我尝试了几种不同的方法，但是什么也做不了。 = /。

Answer 1

悬停在td ，这将警告span的内容，仅当td内部具有span元素时：

$('td').mouseover(function() {
    if($(this).find('span').size() > 0) {
        // This will alert 'sekret stuff here'
        alert($(this).find('span').html());
    }
});

Answer 2

假设页面上只有这些之一：

$('td span').html();

Answer 3

您可能会考虑使用纯CSS，因为它可能更快。

HTML：

<td>
   <a class="magic_link" href="#">Some stuff here
   <span>sekret stuff here</span></a>
</td>

CSS：

a.magic_link:link,
a.magic_link:visited {
    display: block;
    width: 100px;
    height: 50px;
}

a.magic_link:link span,
a.magic_link:visited span {
    display: none;
}

a.magic_link:hover span {
    display: inline;
}

Answer 4

如果要在内容悬停在td单元上之后对其内容进行处理，则需要给该td单元一个ID。

<td id="mycell">
    Some stuff here
    <span style="display:none">Sekret stuff</span>
</td>

然后使用jQuery绑定一个mouseover事件并对内容进行一些处理：

var cell = $('#mycell'), span = cell.find('span');

cell.bind('mouseover', function () {
    var contents = span.html();
    // do something with contents
});

Answer 5

如果页面上还有其他不包含span td ， 则可能要使用:has选择器来确保仅绑定到具有span子项的td 。

$('td:has(span)').mouseover(function(e) {
    var content = $(this).find('span').html(); //or .text() for the plain text
    //do something with the content
});

我认为您最好为td或span一个语义类，但这会使HTML的意图更加明显。 就像是

<td>
   Some stuff here
   <span class="sekret" style="display: none;">sekret stuff here</span>
</td>

...，然后将javascript中的选择器修改为类似

$('td:has(.sekret)').mouseover(...

Answer 6

尝试这个：

$('td').hover(function() {
    var c = $(this).children('span');
    if (c.length > 0) {
        alert($(c[0]).text());
    }
});

它将事件绑定到页面上的每个td ，并查找子span元素，并在td弹出带有第一个span内容的警报。 您可以使用对span内容执行的任何操作来替换代码的alert()部分。 请注意，在该代码内部， this将引用td元素。