仅显示具有不同名称的<h1>中的第一个</h1>

Question

标题是动态获得的。结构目前看起来像这样：

<h1>HEADING CONTENT 1</h1>
some content
<h1>HEADING CONTENT 1</h1>
some content
<h1>HEADING CONTENT 1</h1>
some content
<h1>HEADING CONTENT 2</h1>
some content
<h1>HEADING CONTENT 2</h1>
some content

我只需要显示每个标题的第一个实例。我该怎么做？

编辑：对不起，我目前在另一台电脑上。我会尽快。

Answer 1

如果您的标题实际上都是兄弟姐妹，那么您可以使用一般的兄弟选择器/组合子~，从而display: none使用所有重复的标题

h1 ~ h1, 
h2 ~ h2 {
   display: none;
}

关于codepen的示例：http://codepen.io/anon/pen/Evuhr/

---

更新后：

如果标题都是<h1>并且你必须检查包含的文字，你需要像这样使用javascript / jQuery

$(function() {
  var title = ""
  $('h1').each(function() {
     if ($(this).text() !== title) {
        title = $(this).text();
     } 
     else {
       $(this).hide();  
     }    
  });  
});

关于codepen的示例：http://codepen.io/anon/pen/FBltb

Answer 2

这也可能有用，即使我不确定，CSS也不是我最强的一面。

h1, h2 {
    display:none;
}

h1:first-of-type, h2:first-of-type {
    display: inline-block;
}

Answer 3

更新

如果您使用相同的<h1>标头标记，并希望首先根据innertext显示，则可以使用:contains和.first()来获取所需的结果：

Check this fiddle

CSS 首先隐藏所有h1 s

h1{
    display:none;
} 

<强>的jQuery

$("h1").each(function(){
    $("h1:contains('"+$(this).text()+"')").first().css('display','block');
});

---

jQuery有更好的操作/秒：

var $h1s = $("h1");
$h1s.each(function (i) {
    if ($(this).data('validated')) {
        return;
    }
    $h1s.filter(":contains('" + $(this).text() + "')").data('validated', true).first().show();
});

Fiddle