如何使用相同的类名检查元素后面是否有足够的元素？

Question

我会如何popOver表现时,才会有与元素counter后,元素与类名相同的金额？(计数器将包含第一个元素)

示例:(使用counter = 3)

bar
bar
foo
bar
foo
foo
bar <-- PopOver would show up here
bar  
bar 
foo <-- PopOver would show up here
foo
foo
foo 

示例:(使用counter = 2)

bar <-- PopOver would show up here
bar 
foo
bar
foo <-- PopOver would show up here
foo 
bar <-- PopOver would show up here
bar  
bar
foo <-- PopOver would show up here
foo 

$(".bar").each(function(){
  $(this).append("<div class='popOver'>these would be recommended</div>");
});

.bar {
    color: #000;
    text-decoration: none;   
}

.popOver{
   width:400px;
   height: 30px;
   background: green;
   position: absolute;
   z-index: 999;
   margin-left: 40px;
   opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li href="#" class="bar">Bar</li>
    <li href="#" class="bar">Bar</li>
    <li href="#" class="foo">Foo</li>
    <li href="#" class="bar">Bar</li>
    <li href="#" class="bar">Bar</li>
    <li href="#" class="bar">Bar</li>
    <li href="#" class="foo">Foo</li>
</ul>

Answer 1

您可以使用该+运算符.选择器:

.bar + .bar + .bar

连续第三次选择.bar并执行您想要做的任何事情.

$(".bar + .bar + .bar").each(function(){
  $(this).append("<div class='popOver'>these would be recommended</div>");
});

.bar {
  color: #000;
  text-decoration: none;   
}

.popOver{
  width:400px;
  height: 30px;
  background: green;
  position: absolute;
  z-index: 999;
  margin-left: 40px;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
</ul>

您可以使用该.repeat功能使其可自定义:

var n = 3;

$(".bar" + " + .bar".repeat(n - 1)).each(function(){
  $(this).append("<div class='popOver'>these would be recommended</div>");
});

.bar {
  color: #000;
  text-decoration: none;   
}

.popOver{
  width:400px;
  height: 30px;
  background: green;
  position: absolute;
  z-index: 999;
  margin-left: 40px;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="bar">Bar</li>
  <li href="#" class="foo">Foo</li>
</ul>

其中n值将是具有相同类的元素的数量.