Question

我正在尝试创建一个javascript函数，它接收一个假定为HTML的字符串并删除所有不可见的元素。我不在这里的页面上操作，只是来自任何地方的一串HTML。

起初它似乎使用：隐藏选择器本来是理想的，但我无法让它工作。所以我开始玩filter（），但没有成功。

function StripInvisibleNodes(html) {
    var container = "" + html+ "";
    //var $onlyvisiblehtml = $(container).find(":hidden").remove(); // didn't work
    var $onlyvisiblehtml = $(container).find('*').filter(function() { return this.style.display == "none"; }).remove();
    var removed = $onlyvisiblehtml.html();
    return removed;
}

更新：以下是可行的解决方案

function StripInvisibleNodes(html) {
    $('body').append("<div id='tempspace' style='visibility:hidden'>" + content + "</div>");
    var $toremove = $('#tempspace').find("*").filter(':hidden'); 
    $toremove.remove();
    var resultstring = $('#tempspace').html();
    $('#tempspace').remove();
    return resultstring;
}

Answer 1

如果没有在DOM中呈现HTML，则jQuery不会将其视为:visible。例如：

$test = $('<p>').filter(':visible');

将生成一个空的jQuery对象。

您可以做的是在DOM中简要渲染它们，计算哪些元素可见，然后立即删除它们。如果你不想让它冒险进入视图，你可以将它们放在visibility: hidden或opacity: 0的元素中：

$('#testspace').append('<p>');
$test2 = $('#testspace').children().filter(':visible');
console.log($test2);
$('#testspace').remove();

HTML：

<div id="testspace" style="visibility:hidden"></div>

http://jsfiddle.net/4NxBd/2/

Answer 2

如何选择可见元素？

$(":visible", container).html();

使用jQuery来操作HTML

2 个答案: