Question

我的html页面包含大量文本，包括许多DIV和表格。

在代码的末尾，有一个自动创建的代码，例如：

<div id="fld1_date" ... style="position:absolute;visibility:hidden">

</div>
<div id="fld3_date" ... style="position:absolute;visibility:hidden">

</div>
<div id="fld8_date" ... style="position:absolute;visibility:hidden">

</div>

DIV没有“class”属性。

问题是这些DIV在页面末尾创建了空的线索。这导致水平滚动出现，并打印页面占用超过1页。

Ids随机分配，我无法使用它们。事实上，我无法以任何方式触及这些界限，但必须通过CSS构建某种类型的工作。

当然我无法覆盖CSS中的默认DIV行为，因为它搞砸了所有其他div（并且有几十个）。

我有什么想法可以处理吗？（我知道设计并不完美，这是一个5000程序员小时系统，改变它将是一个问题）

Answer 1

以下是一些想法：

使用body > div child selector将display:none分配给身体标记正下方的所有DIV，并手动修复“附带损害”。根据文档的结构，这可能会使事后明确display:block的DIV少得多。但>选择器在IE6上不起作用。
使用JavaScript迭代所有DIV，识别违规者并将display值设置为none。当然，这要求您可以添加任何JavaScript，并且还可以使用某些标准来识别DIV（不必是ID，也许它们始终是最后的DIV）页面，总是来自页面结束后的标记或某些内容）
使用条件CSS格式àladiv[id|=fld]来捕获ID为“fld”的所有DIV。我不确定这是否违反了“我无法与他们合作”的ID，但它也不适用于IE6（可能更新，我的文档太老了不知道）。您当然可以使用DIV中的任何属性，而不仅仅是id（style，也许？）

编辑：添加链接

Answer 2

是否有div的外部容器？

使用javascript和Mootools，如果是这样的话，我会做这样的事情;

$('outerContainer').getElements('div').setStyle('display', 'none');

Answer 3

更改

visibility: hidden

到

display: none

并且它不会占用任何额外的空间

Answer 4

除了Simon的建议：如果有问题的div是唯一明确设置了'visibility：hidden'的div，你可以这样做：

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
  if (divs[i].style.visibility == "hidden") {
    divs[i].parentNode.removeChild(divs[i]);
  }
}

有效地从DOM中完全删除元素（可能比使用“display：none”的样式更好的性能）。

Answer 5

如果div直接附加到body并且它们都具有相同的ID模式，那么您可以在此级别迭代div并隐藏那些匹配模式：

$("body > div").each(function(i, d) {
    if ( d.id && /fld\d+_date/.test(d.id) ) {
        $(d).hide();
    }
});

如果生成的ID将永远处于该模式（“fld1_date”）并且永远不会有其他类似的模式（例如：“fld_foo_date”），那么你可能会得到类似的东西：

$("body > div[id^=fld][id$=_date]").hide();

有关详细信息，请参阅jQuery selector doc。

*我的所有代码都未经过测试。

Answer 6

如果可以;你应该将这些创建的div包装在你应该创建并隐藏它的父div中;这是如何：

<div id="mydiv">
    <div id="fld1_date" ... style="position:absolute;visibility:hidden">

    </div>
    <div id="fld3_date" ... style="position:absolute;visibility:hidden">

    </div>
    <div id="fld8_date" ... style="position:absolute;visibility:hidden">

    </div>
</div>

现在应用以下css隐藏全部：

<script type="text/css">
div#mydiv
{
    display:none;
}
</script>

隐藏没有ID或类的DIV

6 个答案: