Question

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

我如何在该td中获取<span>标记的内容，以便我的输出将是“sekret stuff here”，使用jQuery？

我尝试过几种不同的东西，却无法解决任何问题。 = /

Answer 1

仅当span内有td元素时，这会在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

如果您在不包含td的页面上有其他span，则您可能希望使用{{3} }选择器，以确保您只绑定到td孩子的span。

$('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元素，并在{{1}内弹出包含第一个span内容的提醒}}。您可以将td部分代码替换为您想要对alert()内容执行的任何操作。请注意，在该代码中，span将引用this元素。

悬停在td标记内的内容

6 个答案: