如何只抓取第一次出现的具有相同文本的元素

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>

用于隐藏开头所有h1的CSS：

h1{
    display:none;
}

---

如果我第一次出现{{1}，即使只需要 3次迭代，当前.each()循环将迭代7次当前小提琴中包含相同文字的标签： - <h1>，<h1>heading1</h1>，<h1>heading2</h1> 。

如果相同的文字标题是一个，我可以编写一个条件，用当前<h1>heading3</h1>文字检查上一个h1文字另外。但是你可以在HTML中看到第三个 h1 出现在 <h1>heading1</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

上看到更新的效果测试

Answer 2

尝试

var $h1s = $("h1"),
    $cp = $h1s,
    $tmp;

for (var i = 0; i < $h1s.length; i++) {
    $tmp = $h1s.filter(":contains('" + $h1s.eq(i).text() + "')");
    $tmp.first().show();
    $cp = $cp.not($tmp.first())
}

演示：Fiddle

在每次迭代中，我们从源数组中删除所有被忽略的元素。

Answer 3

你应该这样做：

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

Answer 4

另一种检查元素是否在屏幕上可见的方法是：

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

Fiddle