jquery - 如何仅获取具有相同文本的元素的第一次出现

Question

我编写了一段 jQuery 代码，它仅显示具有相同文本的标题标记的第一次出现。

下面是 jQuery 代码:

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

Fiddle 中的当前 HTML :

<h1>heading1</h1>
<p>hello</p>
<h1>heading1</h1>
<p>hello</p>
<h1>heading2</h1>
<p>hello</p>
<h1>heading2</h1>
<p>hello</p>
<h1>heading1</h1>
<p>hello</p>
<h1>heading3</h1>
<p>hello</p>
<h1>heading3</h1>
<p>hello</p>

用于隐藏所有的 CSS h1 s 开头:

h1{
    display:none;
}

<小时/>

当前.each()如果我可以得到 <h1> 的第一次出现，即使只需要 3 次迭代，循环也会迭代 7 次在当前 fiddle 中具有相同文本的标签:- <h1>heading1</h1> , <h1>heading2</h1> , <h1>heading3</h1> .

我可以编写一个条件来检查上一个 h1文本，当前 h1 text 如果相同的文本标题是一个接一个的。但是您可以在 HTML 中看到第三个 <h1>heading1</h1> 出现在 <h1>heading2</h1> 之后 在这种情况下，条件将不起作用。

那么有没有一种方法可以让我获得相同的输出，并根据需要进行精确的迭代次数，并且获得比当前代码更高效的代码？

Answer 1

您可以通过忽略可见的来优化它，

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

DEMO

更新版本，

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

DEMO I

您可以在 here 上看到更新后的性能测试