Question

我有一个包含大量动态HTML的div。我想在函数中获取HTML，但我不希望包含任何已使用display：none隐藏的元素。由于此函数的用户界面位于应用程序的另一个选项卡上，并且在调用此函数时容器div本身设置为display：none，因此这有点复杂。请注意，我不想修改容器div本身的内容;只是函数的结果。

// This returns too much
function getHTMLExceptHidden() {
  return $("#document").html();
}

// This returns null
function getHTMLExceptHidden() {
  return $("#document").filter(["style!='display:none'"]).html()
}

Answer 1

它使用原始dom元素的克隆，以便可以在不影响页面的情况下删除元素。由于克隆不在页面上，因此CSS规则将不会应用于它，因此将包含实际隐藏在页面上的元素。为了避免这种情况，应该对原始的dom元素进行检查，而不是克隆！此解决方案递归地检查页面上的每个元素以查看它是否隐藏了display：block，如果是，则将相应的克隆节点添加到列表中以进行删除。检查所有节点后，将从克隆中删除那些隐藏的节点，并从克隆中检索剩余的html。

<强> Live demo (click).

//get element reference
var $container = $('#myDiv');

//clone element
var $clone = $container.clone();

//find display:none elements of cloned element
var $hidden = findHidden($container, $clone);

//remove display:none elements from clone
$hidden.remove();

//convert clone into html string
var html = $clone.html();

console.log(html);

function findHidden($mainI, $cloneI) {
  var $hidden = $();
  $mainI.children().each(function(i, elem) {
    if ($(this).css('display') === 'none') {
      $hidden = $hidden.add($cloneI.children().eq(i));
    }
    else {
      $hidden = $hidden.add(findHidden($(this), $cloneI.children().eq(i)));
    }
  });
  return $hidden;
}

获取元素的html并排除使用display：none（及其后代）隐藏的元素

1 个答案: