Question

我遇到了一个我没有可靠解决方案的问题，除了使用data - 属性创建一个解决方法。但是，我发现我遇到的行为非常奇怪，并且想知道是否有更好的解决方法。

考虑以下代码：

HTML

<div id="test">This is a test!</div>

CSS

#test:after
{
    content: "...This shouldn't be part of text()!";
}

JS

$(document).ready(function () {
    $(document).on("click", "#test", function () {
        alert($(this).text());
    });
});

我正在处理的问题是IE 11似乎将:after伪选择器中的内容作为div中内容的一部分。这意味着当单击div时，IE 11将显示一条警告：

This is a test!...This shouldn't be part of the text()!

然而，我期待一个警告说：

This is a test!

Firefox和Chrome都显示后者警报。我想知道是否可以让IE显示后者警报而不使用额外的data- - 属性等。

此示例中包含 FIDDLE 。

Answer 1

尝试将.text（）更改为.html（），例如：Here。它适用于IE 11.0.9600.17351（使用您的版本和此版本）

代码：

$(document).ready(function () {
    $(document).on("click", "#test", function () {
        alert($(this).html());
    });
});

Answer 2

感谢E先生的回答，我想到了一个可能的解决方案。我可以通过html()获取内容，然后将其重新包装在虚拟div内，然后我再次使用text()。对于这么简单的事情来说，似乎要做很多事情，但它确实有效。

<强> HTML

<div id="test"><span>This is a test!</span></div>

<强> JS

$(document).ready(function () {
    $(document).on("click", "#test", function () {
        var html = $(this).html();
        var text = $("<div />").html(html).text();
        alert(text);
    });
});

查看此更新 FIDDLE 。

IE 11将伪内容视为元素内容的一部分

2 个答案: