Question

我有一个：

<h2>foo<br/>bar</h2>

我想隐藏“bar”，但我找不到合适的选择器。

甚至可能吗？

Answer 1

我认为你应该在B中包装B并隐藏该范围。

Answer 2

首先：正确的方法是添加另一个标签，如果可以，就像其他人建议的那样但是，这可以使用jQuery的contents()选择器分两个阶段完成（我已经在google上讨论了如何使用jQuery查找文本节点）。首先，在$(document).ready上，找到所有自由文本节点，并用虚拟 s（或任何你想要的）包围它们。鉴于此，这将对您的DOM进行一些垃圾邮件：

$(document).ready(function(){
 $("h2").contents()
    .filter(function(){ return this.nodeType != 1; })
    .wrap("<span/>");
});

现在您没有任何裸文本节点，因此您可以轻松选择第二行：

$("h2 br").nextAll();

Answer 3

全css解决方案：

h2 {
    font-size:0%;
}
h2:first-line {
    font-size:19pt;
}

Answer 4

尝试h2：not（：first-line）

令人怀疑的是，这是有效的，一线是跨越浏览器的错误。（请参阅http://docs.jquery.com/Selectors/not#selector和http://www.w3schools.com/Css/pr_pseudo_first-line.asp）

Answer 5

据我所知，它没有选择器。一个可能的（hacky）解决方案是为H2元素设置一个高度并添加overflow：hidden;

Answer 6

无法通过选择器选择文本节点。但是，你仍然可以做你想做的事：

var brFound = false;
$('h2').contents().each(function() {
  if (brFound) {
    this.parentNode.removeChild(this);
    // Alternatively, you could use either of these, but it won’t be as fast:
    // $(this).remove();
    // $(this).wrap('<span style="display:none;" />');
  }
  if (this.tagName && this.tagName.toLowerCase() == 'br') {
    brFound = true;
  }
});

这将删除 元素中<h2>之后显示的所有文本节点和其他元素，使 保持不变。

在<x> A <br/> B </x>中隐藏B.

6 个答案: