logo标签列表

如何检查是否存在一个元素，并且其后有足够多的相同类名的元素？

javascriptjquerycss
3

当且仅当在该元素后面有与它相同类名的元素数量等于counter时，我应该如何使popOver显示？ （计数器将包括第一个元素）

示例：（当计数器为3时）

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

例子：（计数器为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>

3个回答
6
您可以使用+运算符。选择器如下：
.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值将是具有相同类的元素数量。

抱歉，我刚刚更新了我的问题并提供了更多的信息。 - YaBCK
@ChrisBeckett 我已经更新了我的答案。如果看起来不错，请接受它。提前致谢。：D - Praveen Kumar Purushothaman
请看一下我的问题，我刚刚用一个快速示例进行了更多更新。提前致谢。 - YaBCK
@ChrisBeckett 你说“连续”！！！而且第二个例子不一致……令人困惑。 - Praveen Kumar Purushothaman
@ChrisBeckett 看到了... :/ - Praveen Kumar Purushothaman
3
问题是，他想在第一个元素上使用popOver，而不是第三个元素。因此，您需要检查是否有三个元素，而不更改当前选择。 - Makaze
1
稍微改进一下@Praveen Kumar的答案，这个函数应该可以满足你的需求： 

function addPopOverEvery(n, selector) {
 $(selector).each(function() {
  var $original = $(this),
  $self = $(this),
  $is_pop = true,
  i = 0;
  if ($original.prev().is(selector)) {
   for (i = 1; i < n; i++) {
    $self = $self.prev();
    if (!$self.is(selector) || $self.find('.popOver').length) {
     $is_pop = false;
     break;
    }
   }
  }
  if ($is_pop) {
   $self = $original;
   for (i = 1; i < n; i++) {
    $self = $self.next();
    if (!$self.is(selector)) {
     $is_pop = false;
     break;
    }
   }
  }
  if ($is_pop) {
   $original.append("<div class='popOver'><-- these would be recommended</div>");
  }
  console.log($original.get(0));
 });
}

addPopOverEvery(3, '.bar');
.bar {
  color: #000;
  text-decoration: none;   
}

.popOver{
  width:300px;
  height: 30px;
  background: green;
  position: absolute;
  display: inline-block;
  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="bar">Bar</li>
  <li href="#" class="bar">Bar</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>
  <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>

带有2：

function addPopOverEvery(n, selector) {
 $(selector).each(function() {
  var $original = $(this),
  $self = $(this),
  $is_pop = true,
  i = 0;
  if ($original.prev().is(selector)) {
   for (i = 1; i < n; i++) {
    $self = $self.prev();
    if (!$self.is(selector) || $self.find('.popOver').length) {
     $is_pop = false;
     break;
    }
   }
  }
  if ($is_pop) {
   $self = $original;
   for (i = 1; i < n; i++) {
    $self = $self.next();
    if (!$self.is(selector)) {
     $is_pop = false;
     break;
    }
   }
  }
  if ($is_pop) {
   $original.append("<div class='popOver'><-- these would be recommended</div>");
  }
  console.log($original.get(0));
 });
}

addPopOverEvery(2, '.bar');
.bar {
  color: #000;
  text-decoration: none;   
}

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

.popOver{
  width:300px;
  height: 30px;
  background: green;
  position: absolute;
  display: inline-block;
  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>

addPopOverEvery(n) 存在问题。例如，正如 @ZakariaAcharki 所说，你是否尝试过 addPopOverEvery(2)；因为如果有三个具有相同类的元素排成一行，第一个和第二个元素会得到 popOver。 - YaBCK
添加了 catch alls，感谢反馈。现在怎么样？ - Makaze
@Makaze 謝謝你的回答，這正是我想要的。 - YaBCK
@Makaze 如果有一个类似于 class="bar" class="bar" class="bar foo" 的类，我该如何处理呢？我只想允许前两个元素，因为它们没有 foo。 - YaBCK
1
@Makaze 不好意思评论有点多，不用担心之前提问的那条评论...我发现我可以使用addPopOverEvery(2, '.bar:not(.foo)'); - 再次感谢回答。 - YaBCK
1

如果你没有特定的 class，那么就无法使用 + 符号来完成这个操作，因此你需要使用编程方法，使用 if - else 条件和计数器来验证连续类的数量是否等于我们的计数器，参见下面的示例。

希望这可以帮助到你。

var nbr = 3;
var count = 0;
var last_class = $('li:first').attr('class');

$('li').each(function(index)
{
  if( $(this).attr('class')===last_class )
  {
    count++;
    last_class = $(this).attr('class');
  }else{
    count=1;
    last_class = $(this).attr('class');
  }

  if(count===nbr){
    $('li:eq('+(index-(nbr-1))+')').append("<span class='popOver'> <= these would be recommended</span>");
    
    count=0;
  }
  
});
.bar {
  color: #000;
  text-decoration: none;   
}

.popOver{
  width:250px;
  height: 18px;
  background: green;
  position: absolute;
  z-index: 999;
  margin-left: 40px;
  opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接